angularjs中ng-options指令

html 代码
<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script src="js/angular.min.js"></script>
        <script>
            var myApp = angular.module('myApp', []);
            myApp.controller('myCtrl', ['$scope', function($scope) {
                $scope.datas = [
                    {
                        id: 1000,
                        grade: '一年级',
                        name: '(1)班'
                    },
                    {
                        id: 1001,
                        grade: '一年级',
                        name: '(2)班'
                    },
                    {
                        id: 1003,
                        grade: '二年级',
                        name: '(1)班'
                    },
                    {
                        id: 1004,
                        grade: '二年级',
                        name: '(2)班'
                    },
                    {
                        id: 1005,
                        grade: '三年级',
                        name: '(1)班'
                    },
                    {
                        id: 1006,
                        grade: '三年级',
                        name: '(2)班'
                    }
                ];
            }]);
        </script>
    </head>
    <body ng-controller="myCtrl">
        <!--
            ng-options指令的顺序为从右到左，其中datas是一个包含对象的数组，data为datas中的每一项内容，data.name表示option标签中的第一个子节点的值，data.id表示option标签中value的值，其中data.name按照data.grade进行分组，select标签中的ng-model绑定的就是option标签中的value

        -->
        <select class="form-control" ng-model="mySel" ng-options="data.id as data.name group by data.grade for data in datas">
            <option value="请选择选项">请选择选项</option>
        </select>
        {{mySel}}
    </body>
</html>
angularjs中ng-options指令

猜你喜欢
