ng-options的使用

Posted tonghaolang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ng-options的使用相关的知识，希望对你有一定的参考价值。

参考：官方文档、zhx1991

 

select 无默认选择一项

<select name="" id="" class="form-control" ng-options="item.id for item in optData" ng-model="selected">
  <!-- item.id是label 显示出来的 item是value 选中的数据object -->
  <option value="">---请选择---</option>
</select>

 

select 有默认选择一项

  $scope.selected=$scope.optData[1];

 

 

 

select其他

//字符拼接
<select name="" id="" class="form-control"
ng-options="(item.id+\' \'+item.ProductName) for item in optData"
ng-model="selected"></select>
//分组 label group by groupName for value in Array
<select name="" id="" class="form-control"
ng-model="selected" 
ng-options="item.id group by item.MainCategory for item in optData">
</select>
//下面selected的值为optData的id select as label for value in Array
<select name="" id="" class="form-control"
ng-model="selected" 
ng-options="item.id as item.ProductName for item in optData"></select>
//多级列表
<select name="" id="" class="form-control" ng-options="obj.name for obj in people" ng-model="selectedPerson">
</select>
<select name="" id="" class="form-control" ng-model="selectedGenre">
    <option ng-repeat="label in people[selectedPerson.id].interest">{{label}}</option>
</select>

ng-options的内容：

  • for array data sources:
    • labelforvalueinarray
    • selectaslabelforvalueinarray
    • labelgroup bygroupforvalueinarray
    • labeldisable whendisableforvalueinarray
    • labelgroup bygroupforvalueinarraytrack bytrackexpr
    • labeldisable whendisableforvalueinarraytrack bytrackexpr
    • labelforvalueinarray | orderBy:orderexprtrack bytrackexpr(for including a filter with track by)
  • for object data sources:
    • labelfor (key,value) inobject
    • selectaslabelfor (key,value) inobject
    • labelgroup bygroupfor (key,value) inobject
    • labeldisable whendisablefor (key,value) inobject
    • selectaslabelgroup bygroupfor(key,value) inobject
    • selectaslabeldisable whendisablefor(key,value) inobject

自己的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>
    <script src="https://cdn.bootcss.com/angular-i18n/1.5.8/angular-locale_zh-cn.js"></script>
    <script>
        angular.module(\'m1\',[\'ui.bootstrap\'])
        .controller(\'ngselect\',function($scope){
            $scope.optData=[
                {id:10001,MainCategory:\'男\',ProductName:\'水洗T桖\',ProductColor:\'白\'},
                {id:10002,MainCategory:\'男\',ProductName:\'干洗毛衣\',ProductColor:\'黑\'},
                {id:10003,MainCategory:\'女\',ProductName:\'干洗毛衣\',ProductColor:\'篮\'},
                {id:10004,MainCategory:\'女\',ProductName:\'水洗T桖\',ProductColor:\'红\'}
            ]
        })
        .controller(\'ngselect1\',function($scope){
            $scope.optData=[
                {id:10001,MainCategory:\'男\',ProductName:\'水洗T桖\',ProductColor:\'白\'},
                {id:10002,MainCategory:\'男\',ProductName:\'干洗毛衣\',ProductColor:\'黑\'},
                {id:10003,MainCategory:\'女\',ProductName:\'干洗毛衣\',ProductColor:\'篮\'},
                {id:10004,MainCategory:\'女\',ProductName:\'水洗T桖\',ProductColor:\'红\'}
            ];
            $scope.selected=$scope.optData[1];
        })
        .controller(\'ngselect2\',function($scope){
            $scope.optData=[
                {id:10001,MainCategory:\'男\',ProductName:\'水洗T桖\',ProductColor:\'白\'},
                {id:10002,MainCategory:\'男\',ProductName:\'干洗毛衣\',ProductColor:\'黑\'},
                {id:10003,MainCategory:\'女\',ProductName:\'干洗毛衣\',ProductColor:\'篮\'},
                {id:10004,MainCategory:\'女\',ProductName:\'水洗T桖\',ProductColor:\'红\'}
            ];
            $scope.selected=$scope.optData[1].id;
        })
        .controller(\'ngselect3\',function($scope){
            $scope.people = [
                    {
                            id: 0,
                            name: \'张三\',
                            interest: [
                            \'爬山\',
                            \'游泳\',
                            \'旅游\',
                            \'美食\'
                        ]
                    },
                    {
                        id: 1,
                        name: \'李四\',
                        interest: [
                            \'音乐\',
                            \'美食\',
                            \'Coffee\',
                            \'看书\'
                        ]
                    },
                    {
                        id: 2,
                        name: \'王五\',
                        interest: [
                            \'音乐\',
                            \'电影\',
                            \'中国好声音\',
                            \'爸爸去哪了\',
                            \'非常静距离\'
                        ]
                    },
                    {
                        id: 3,
                        name: \'小白\',
                        interest: [
                            \'游泳\',
                            \'游戏\',
                            \'宅家里\'
                        ]
                    }
                ];
           
        })
    </script>
</head>
<body ng-app="m1">
    <div class="container">
        <h1>下拉列表</h1>
        <div ng-controller="ngselect">
            <h4>无默认选择 label for value in array</h4>
            <div class="col-xs-6">
                <select name="" id="" class="form-control" ng-options="item.id for item in optData" ng-model="selected">
                    <!-- item.id是label 显示出来的 item是value 选中的数据object -->
                    <option value="">---请选择---</option>
                </select>
            </div>
            <div class="col-xs-6">
                <input type="text" class="form-control" value="{{selected.id+\'--\'+selected.ProductName+\'--\'+selected.MainCategory}}"  >
            </div>
            <p class="well">添加一个\'option\'</p>
        </div>
        <div ng-controller="ngselect1">
            <h4>默认选择一项</h4>
            <div class="col-xs-6"><select name="" id="" class="form-control" ng-options="item.id for item in optData" ng-model="selected"></select></div>
            <div class="col-xs-6"><select name="" id="" class="form-control" ng-options="(item.id+\' \'+item.ProductName) for item in optData" ng-model="selected"></select></div>
            
            <div class="col-xs-6">
                <select name="" id="" class="form-control" ng-model="selected" ng-options="item.id group by item.MainCategory for item in optData"></select>
            </div>
            
        </div>
        <div ng-controller="ngselect2">
            <div class="col-xs-6">
                <select name="" id="" class="form-control" ng-model="selected" ng-options="item.id as item.ProductName for item in optData"></select>
                <input type="text" ng-model="selected">
            </div>
        </div>
        <div ng-controller="ngselect3">
            <div class="col-xs-3">
                <select name="" id="" class="form-control" ng-options="obj.name for obj in people" ng-model="selectedPerson">
                </select>
            </div>
            <div class="col-xs-3">
                <select name="" id="" class="form-control" ng-model="selectedGenre">
                    <option ng-repeat="label in people[selectedPerson.id].interest">{{label}}</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>

 

　　

 

以上是关于ng-options的使用的主要内容，如果未能解决你的问题，请参考以下文章

在 ng-options 上使用过滤器来更改显示的值

关于ng-option

ng-options的使用

绑定一组 ng-options 的一个属性

Angularjs：使用ng-option时如何在选择中包含空选项

ng-options用法详解