ng-select|ng-select ng-options
最近一段时间的项目中遇到了很多的关于下拉框的场景,当时只是模仿原有的项目代码,并没有深入的理解,为此写此博客将该问题深入进行理解。
主要是对ng-options的学习
下面现将ng-options的几个典型的用法列出来
在指令中ng-model 与 ng-options 配合使用
ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上,因为我们主要使用数组,所以下面主要讲数组。
label for value in array
这是最简单的一个只是简单的将数组中对象的lable属性显示出来,ng-model的值还是value。
select as label for value in array
这种写法中涉及到as的使用,当前的显示还依然是lable的值,但是ng-model的值已经发生了改变,成为了select中的值
【ng-select|ng-select ng-options】label group by group for value in array
这种写法涉及到group for的使用当前的显示还是lable,但回按照group分组,ng-model的值为value
label for value in array track by trackexpr
这条指令涉及到track by 的使用用于唯一确定数组中的迭代项的表达式,当lable相同时,指定唯一的value值与ng-model绑定
当数据源为对象时
label for ( key , value ) in object
为大概使用模式,就是将value改为 ( key , value )如下形式,ng-model默认绑定model
在学习上面几种写法时,发现track by 的使用不太好理解,用官网上的例子说明一下。
This will work:
$scope.selected = $scope.items[0];
but this will not work:
$scope.selected = $scope.items[0].subItem;
第一个你可以通过ng-model来唯一确定数组中的迭代项,items[0]里面包含item.id
第二个你会发现items[0].subItem不能确定item.id
推荐阅读
- JS中的各种宽高度定义及其应用
- 人生感悟记#环境仪器宋庆国成长记#072
- “精神病患者”的角度问题
- 放下心中的偶像包袱吧
- 疲困,却仍得继续
- RxJava|RxJava 在Android项目中的使用(一)
- 热爱的东西就得坚持哦
- 五一反思
- 谁还顾念小城的旧()
- c++基础概念笔记