虽然项目已经进行一大半了,但是 ngOptions 还真的一直保留着困惑,其实第一眼看我怎么都感觉像是 Linq 一般,所以弄懂他才能够真正活用。而官方文档也只是把各种方式罗列一下,也没有示例,所以还是认认真真的学习一遍。

那么,我需要开始假设有以下数据,由于数组和对象数据源有些不同,以下是我假定的两种数据源。完整的示例

    $scope.users = [
        { name: 'cipchk', gender: '男', age: 25 },
        { name: '卡色', gender: '男', age: 18 },
        { name: '外卖从来没遇到美女', gender: '女', age: 18 },
        { name: '今晚不知道要吃什么', gender: '女', age: 18 },
        { name: '其实.NET很好', gender: '女', age: 18 },
        { name: 'fhw r', gender: '女', age: 18 }
    ];

    // 相当于c# Dictionary<int, string>
    $scope.product = {
        1: 'KFC',
        2: '麦当苏',
        3: '鱼丸',
        4: '星巴克',
        5: '错了,星巴克放在前面'
    };

一、label for value in arraylabel for (key , value) in object

<select ng-model="first.user" ng-options="item.name for item in users" class="form-control"></select>
<select ng-model="first.product" ng-options="value for (key, value) in product" class="form-control"></select>
  1. value等同于源码中的item(key, value),相当于c#中 foreach(var item in object) 一样,即每次获取一个元素放入item中。
  2. label等同于源码中的item.namevalue,相当于 <option>item.name</option> 一样。

执行结果:
1

二、 as 关键词

<select ng-model="first.user" ng-options="item.gender as item.name for item in users" class="form-control"></select>
<select ng-model="first.product" ng-options="key as value for (key, value) in product" class="form-control"></select>

直白点讲就是将 as 前面的变量赋于 ng-model

执行结果:
2

三、 group by 关键词

<select ng-model="third.user" ng-options="item.name group by item.gender for item in users" class="form-control"></select>
<select ng-model="third.product" ng-options="key as value group by key for (key, value) in product" class="form-control"></select>
  1. group by xx位置必须是 for 关键词之后。
  2. 分组实际是生成一个 <optgroup label="男"></optgroup> 标签。

四、完整表达式

所以的关键词已经全部说到了,这里我来弄一个完整的表达式,其意:对数据源users,以年龄分组,下拉列表文本是姓名、值为年龄。

<select ng-model="full.user" ng-options="item.age as item.name group by item.gender for item in users" class="form-control"></select>

其实把表达式拆分开来说,回过头看文章,好像并没有什么特别,也相当容易理解,只不过刚开始在结合文档时很晕。

附录:

  1. 在线示例代码
  2. 官网文档

以上。