angular Select选择框

前端之家收集整理的这篇文章主要介绍了angular Select选择框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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>
原文链接:https://www.f2er.com/angularjs/146117.html

猜你在找的Angularjs相关文章