大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
1、ng-options指令用途:
10年积累的成都网站建设、网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有当涂免费网站建设让你可以放心的选择与我们合作。
在表达式中使用数组或对象来自动生成一个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-option使用注意
使用时候,必须加 ng-model 指令,否则无法使用会报错
2、select下拉框中label和value分别代表什么
先写个最简单最原始的select下拉框
label 和 value 具体是什么
现在引入 angular 使用 ng-options 指令来生成一个下拉框,看下生成页面的代码
label 和 value 具体是什么
{{ selectedCity }}
看下预览的页面效果,在后面添加的使用 ng-options 生成的select中,我们使用 obj 对象的 id作为select的value,使用obj 的city 作为 select 的label
3、三种ng-options常用方法:
label 和 value 具体是什么 演示 label 和 value 值的变化
{{ selectedCity }}1. “数组”实现基本下拉
语法: laber for value in array
2. “包含对象的数组”实现“label 和 value值不同”的下拉
语法: select as label for value in array
哪位同学你认识?你的选择是:{{selectedStu}}
自定义下拉显示内容格式
哪位同学你认识?你的选择是:{{selectedStuString}}
语法:拼接字符串
使用group by对下拉菜单分组
语法:label group by groupName for value in array
哪位同学你认识?你的选择是:{{selectedStuString2}}
3. “对象”实现基本下拉
语法 1: label for (key , value) in object
哪个城市?你的选择是:{{scity}}
语法 2: select as label for (key ,value) in object
哪个城市?你的选择是:{{scity01}}
关于对象使用方法中 key 和 value 的一点说明
4、ng-options 全部用法补充
标红部分在代码中已有例子,其余的请自行消化理解测试
对于数组:
对于对象:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。