angular指令笔记ng

angular指令笔记ng

1、ng-options指令用途：

在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。当select中一个选项被选择，该选项将会使用ng-model自动绑定到对应数据上。如果你想设一个默认值，可以像这样：$scope.selected = $scope.collection[3]。

1.1  track by的用途：

track by主要是防止值有重复，angularjs会报错。因为angularjs需要一个唯一值来与生成的dom绑定，以方便追踪数据。例如：items=[“a”,“a”,“b”],这样ng-repeat=“item in items”就会出错，而用ng-repeat=“(key,value) in items track by key”就不会出现错误了。

1.2 ng-optiDNaWcTCKion使用注意

使用时候，必须加 ng-model 指令，否则无法使用会报错

2、select下拉框中label和value分别代表什么

先写个最简单最原始的select下拉框

语文

数学

英语

生物

现在引入 angular 使用 ng-options 指令来生成一个下拉框，看下生成页面的代码

语文

数学

英语

生物

看下预览的页面效果，在后面添加的使用 ng-options 生成的select中，我们使用 obj 对象的 id作为select的value，使用obj 的city 作为 select 的label

3、三种ng-options常用方法：

语文

数学

英语

生物

语法： laber for value in array

语法： select as label for value in array

哪位同学你认识？你的选择是：{{selectedStu}}

自定义下拉显示内容格式

哪位同学你认识？你的选择是：{{selectedStuString}}

语法：拼接字符串

使用group by对下拉菜单分组

语法：label group by groupName for value in array

哪位同学你认识？你的选择是：{{selectedStuString2}}

语法 1： label for (key , value) in object

哪个城市？你的选择是：{{scity}}

语法 2： select as label for (key ,value) in object

哪个城市？你的选择是：{{scity01}}

关于对象使用方法中 key 和 value 的一点说明

4、ng-options 全部用法补充

标红部分在代码中已有例子，其余的请自行消化理解测试

对于数组：

label for value in array

 select as label for value in array

 label group by group for value in array

 label disable when disable for value in array

 label group by group for value in array track by trackexpr

 label disable when disable for value in array track by trackexpr

 label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)

对于对象：

label for (key , value) in object

 select as label for (key ,value) in object

 label group by group for (key,value) in object

 label disable when disable for (key, value) in object

 select as label group by group for(key, value) in object

 select as label disable when disable for (key, value) in object

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。