玩转ng-options小伎俩（转载+学习整理）

来源：互联网发布：帝国cms 自动生成标签编辑：程序博客网时间：2024/06/11 03:10

前言
最近做的一个小项目进入测试阶段，一个下拉列表提出了优化需求，需要把循环生成的数组对象的两个属性值都显示到下拉列表内容中，且在调用接口查询时只能把选中项的其中一个属性值作为参数传参，实现过程中幸有老司机帮助，但我却不太看得懂老司机帮忙改的代码！

所幸找到一篇介绍ng-options四种用法的文章，学有所得，不亦乐乎，以此为记！
对文章来源作者分享的知识表示感谢~原文链接：http://www.jb51.net/article/67909.htm

正文
上代码：

<!DOCTYPE html><html lang="en" ng-app = "testNgOptions"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        select{            width: 200px;            height: 30px;        }    </style>    <script src = "lib/angular.min.js"></script>    <script>        var app = angular.module('testNgOptions',[]);        app.controller('fatherCtrl',['$rootScope',function($rootScope){            $rootScope.optData = [{                id: 10001,                MainCategory: '男',                ProductName: '水洗T恤',                ProductColor: '白'            },{                id: 10002,                MainCategory: '女',                ProductName: '圓領短袖',                ProductColor: '黃'            },{                id: 10003,                MainCategory: '女',                ProductName: '圓領短袖',                ProductColor: '黃'            }];        }]);        app.controller('testNgOptionsCtrl1',['$scope',function($scope){            $scope.selected = '';        }]);        app.controller('testNgOptionsCtrl2',['$scope',function($scope){            $scope.selected = '';        }]);        app.controller('testNgOptionsCtrl3',['$scope',function($scope){            $scope.selected = '';        }]);        app.controller('testNgOptionsCtrl4',['$scope',function($scope){            $scope.selected = '';        }]);    </script></head><body ng-controller = "fatherCtrl">    <!-- 1.基本下拉效果(lable for value in array)　　其中select标签中的ng-model属性必须有，其值为选中的对象或属性值。 -->    <div ng-controller = "testNgOptionsCtrl1">        <p>1.基本下拉效果(lable for value in array)</p>        <p>选项:{{selected}}</p>        <select ng-model="selected" ng-options="o.id for o in optData">            <option value="">请选择</option>        </select>           </div>    <!-- 2.自定义下拉显示名称(label for value in array)    label可以根据需要拼接出不同的字符串 -->    <div ng-controller = "testNgOptionsCtrl2">        <p>2.自定义下拉显示名称 label可以根据需求拼接出不同的字符串(label for value in array)</p>        <p>选项:{{selected}}</p>        <select ng-model="selected" ng-options="(o.ProductColor+'-'+o.ProductName) for o in optData">        <!-- <select ng-model="selected" ng-options="o.id for o in optData"> -->            <option value="">请选择</option>        </select>    </div>    <!-- 第3种用法：ng-options 选项分组    group by分组项 -->    <div ng-controller = "testNgOptionsCtrl3">        <p>3.ng-options 选项分组(usage:label group by groupName for value in array)</p>        <p>选项:{{selected}}</p>        <select ng-model="selected" ng-options="(o.ProductColor+'-'+o.ProductName) group by o.MainCategory for o in optData">            <option value="">-- 请选择 --</option>        </select>    </div>    <!-- 第4种用法：ng-options 自定义ngModel的绑定    下面selected的值为optData的id 效果 http://sandbox.runjs.cn/show/nhi8ubrb -->    <div ng-controller = "testNgOptionsCtrl4">        <p>4.ng-options 自定义ngModel的绑定(usage:select as label for value in array)</p>        <p>选项:{{selected}}</p>        <select ng-model="selected" ng-options="o.id as o.ProductName for o in optData">            <option value="">-- 请选择 --</option>        </select>    </div></body></html>

代码运行效果
同样从来源文章了解到RunJS,可以展示代码运行效果，方便日后温故知新，以及更便利地分享知识，我也照单全收，照猫画虎，学着用起来吧！

预览代码效果：
http://sandbox.runjs.cn/show/r512c74a

总结

ng-options 四种用法：

1.基本用法（显示 o 对象的某一个属性值作为下拉名称）：
ng-options = ” o.attr for o in dataArr “

2.显示更多：同一对象显示更多下拉名称（比如需要显示 o 对象的两个或更多个属性值作为一个下拉列表项）:
ng-options = ” (o.attr1 + ‘-’ + o.attr2) for o in dataArr “

3.选项分组（将下拉选项按照 o 对象某一属性分组显示）：
ng-options = ” (o.attr1 + ‘-’ + o.attr2) group by o.attr3 for o in dataArr “

4.自定义ngModel的绑定:
ng-options = ” o.attr1 as o.attr2 for o in dataArr ”
这时，o.attr1 是 ng-model 绑定的值，o.attr2 是下拉列表显示的值。

注意事项：
1.select标签中的ng-model属性必须有
2.前3种方法 ng-model 绑定的都是一个对象，被选中的那个下拉列表项对应的对象；只有第4种用法 ng-model 绑定的是对象的一个属性值，也就是自定义的 o.attr1 as o.attr2 for o in dataArr 中的 o.attr1 。

后记
原来传参时只传一个属性值这里老司机用的就是第4种用法，好吧，我原谅自己上午的懵圈了，之前这个知识点全盲，不过现在会啦~另一个需求同时显示循环中一个对象的两个属性值，第2种方法也可以完美满足！

0 0