angularJS中select元素的应用浅析

select array 数据：

　　

select ng-model 用法：

　　1.可以是一个对象形式，ng-model="test"　　　　　　　　　　$scope.test = {name: "admin1", id: 1, data: [12], type: "open"};

　　2.可以是一个string或者number，ng-model="test.id"　　　　$scope.test = {name: "admin1", id: 1, data: [12], type: "open"};

select ng-change 用法：

　　

　　ng-change="getDateTest(test)"　　

　　　　$scope.getDateTest = function (item) {

　　　　　　console.log(item);　　
　　　　};

　　本来是想把item直接当作参数传给getDateTest，但是试过之后发现不行，拿到的是undefined，不能像ng-repeat循环出来的那样做。

select ng-options 用法：

　　1.item.name for item in array

　　　　基本用法，array是一个数组列表，item是数组中的一项，json形式，name是json中的一项。

　　　　可以看到循环出来的label就是item.name，但是value值应该是随机搞出来的，这里没指定的情况下，我也不太清楚value是按照啥来的-_-

　　　　

　　　　

　　2.item.id as item.name for item in array

　　　　item.id 会和 test.id 进行对比，如果一样，会默认选到这一项option；当选择某一项option时会把当前的id赋值给test.id。

　　　　这种情况下，label是item.name,value就是item.id。

　　　　

　　　　

　　3.item.name for item in array track by item.id

　　　　这种情况是在基本配置下多了一个track by，是用来指定索引项，在这里value就是item.id。

　　　　选择某一项option时，test会被赋值为当前的option，也就是当前的一项item，所以这时候就可以在ng-change时把test传回去，解决了上面无法传入item的问题。

　　　　

　　　　

　　4.item.name group by item.type for item in array

　　　　这种用法可以分组，依据item.type分成了两组数据。

　　　　

　　　　

　　　　

　　5.对象的用法：

　　　　

　　　　1).key for (key, value) in object

　　　　　　需要注意的是这里的test会被赋值成value的值。

　　　　　　

　　　　　　

　　　　2).key as key for (key, value) in object

　　　　　　这种情况和上面唯一的区别是test会被赋值成key的值。

　　　　　　

　　　　3).key group by value for (key, value) in object

　　　　　　这种情况下会按照value分组。

　　　　　　

　　　　　　

　　　　　　

select 小结：

　　在使用angular过程中，会经常与列表的循环打交道，用的比较多的是ng-repeat，那个很好用。但是最近用到了select，就了解了一下，发现ng-options也是很有趣，也蛮多用法的，就简单总结了一下，希望以后再用到什么新功能再来补充吧-_-