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

最新推荐文章于 2020-08-25 16:48:50 发布

youyoufenglai

最新推荐文章于 2020-08-25 16:48:50 发布

阅读量1.1k

点赞数

分类专栏： angular 文章标签： ng-options angularjs

angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

所幸找到一篇介绍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种方法也可以完美满足！