angular Select选择框

发布时间：2020-12-17 08:49:35 所属栏目：安全来源：网络整理

导读：ng-options 生成select下拉列表需要配合ng-model指令使用否则报错 ```html body ng-app="myApp" ng-controller="demoCtrl" !-- ng-options ：生成下拉框列表需要和ng-model指令配合使用 ball in balls 类似于ng-repeat balls 是要进行循环的数据 in 固定

ng-options 生成select下拉列表需要配合ng-model指令使用否则报错

```html
    <body ng-app="myApp" ng-controller="demoCtrl">

        <!--
            ng-options ：生成下拉框列表 需要和ng-model指令配合使用

            ball in balls 类似于ng-repeat

                balls 是要进行循环的数据

                in 固定写法

                ball 是每次循环的当前项

            ball.name for

                for 固定写法

                ball.name 将要显示在option标签内的值

            ball.value as

                as 固定写法

                ball.value 将要显示在option标签value属性中的值

        -->

        <select ng-model="likeBall" ng-options="item.value as item.name for item in balls"></select>

        {{likeBall}}

        <script src="node_modules/angular/angular.min.js"></script>
        <script>
            angular.module('myApp',[])
                .controller('demoCtrl',['$scope',function($scope){

                    // 给下拉列表设置默认值 和options标签value属性的值对应
                    $scope.likeBall = "001";

                    // 下拉列表的数据源
                    $scope.balls = [
                        {
                            name:'足球',value:'001'
                        },{
                            name:'篮球',value:'002'
                        },{
                            name:'橄榄球',value:'003'
                        },{
                            name:'排球',value:'004'
                        },{
                            name:'乒乓球',value:'005'
                        }
                    ];

                }])
        </script>
    </body>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!