angular 的select标签以及联动

最新推荐文章于 2022-03-19 19:05:32 发布

火夆

最新推荐文章于 2022-03-19 19:05:32 发布

阅读量1.9k

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/little_beauty/article/details/80981065

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

angular的select标签用法

<select ng-model="value" ng-options="item.id as item.name for item in arr"></select>
 //当前option的id 就是select的ng-model的值，在页面显示的是name，默认选中可以用 $scope.value = id

联动的问题：这里要注意的是ng-options="item.name for item in data"，默认选中的话需要循环根据id判断默认值，具体代码如下

<html>
   
   <head>
      <meta charset="utf-8">
      <title>AngularJS  依赖注入</title>
   </head>
   
   <body>
      <div ng-app="myApp" ng-controller="PaginationDemoCtrl">
        <select ng-model="mygame" ng-change="myarea=mygame.areas[0];myserver=myarea.servers[0]" ng-options="item.name for item in data">
            <option value="">--游戏--</option>
        </select>
        <select ng-model="myarea" ng-change="myserver=myarea.servers[0]"  ng-options="item.name for item in mygame.areas" >
            <option value="">--大区--</option>
        </select>
        <select ng-model="myserver" ng-options="item.name for item in myarea.servers">
            <option value="">--服务器--</option>
        </select>
    <button ng-click="aaaa()">结果</button>
    <button ng-click="bbbb()">默认选中</button>
</div>
      
      <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
      
      <script>
angular.module('myApp',[])
.controller('PaginationDemoCtrl', ["$scope",function ($scope) {
    $scope.data = [
        {
            name:"使命召唤",
            id:"smzh",
            areas:[
                {
                    name:'使命召唤一区',
                    id:"smzh01",
                    servers:[
                        {
                            name:"使命召唤一区一服",
                            id:"smzh0101",
                        },
                        {
                            name:"使命召唤一区二服",
                            id:"smzh0102",
                        }
                    ]
                },{
                    name:'使命召唤二区',
                    id:"smzh02",
                    servers:[
                        {
                            name:"使命召唤二区一服",
                            id:"smzh0201",
                        },
                        {
                            name:"使命召唤二区二服",
                            id:"smzh0202",
                        }
                    ]
                }
            ]
        },{
            name:'dnf',
            id:"dnf",
            areas:[
                {
                    name:'dnf一区',
                    id:"dnf01",
                    servers:[
                        {
                            name:"dnf一区一服",
                            id:"dnf0101",
                        },
                        {
                            name:"dnf一区二服",
                            id:"dnf0102",
                        }
                    ]
                },{
                    name:'dnf二区',
                    id:"dnf02",
                    servers:[
                        {
                            name:"dnf二区一服",
                            id:"dnf0201",
                        },
                        {
                            name:"dnf二区二服",
                            id:"dnf0202",
                        }
                    ]
                }
            ]
        }
    ];
    $scope.aaaa = function () {
        console.log($scope.mygame);
        console.log($scope.myarea);
        console.log($scope.myserver);
    };

    $scope.bbbb = function () {
        angular.forEach($scope.data,function (item) {
            if("smzh"==item.id){
                $scope.mygame = item;
            }
        });
        angular.forEach($scope.mygame.areas,function (item) {
            if("smzh01"==item.id){
                $scope.myarea = item;
            }
        });
        angular.forEach($scope.myarea.servers,function (item) {
            if("smzh0101"==item.id){
                $scope.myserver = item;
            }
        });
    };
}]);
    </script>
      
   </body>
</html>

火夆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
angular 的select标签以及联动

angular的select标签用法&lt;select ng-model="value" ng-options="item.id as item.name for item in arr"&gt;&lt;/select&gt; //当前option的id 就是select的ng-model的值，在页面显示的是name，默认选中可以用 $scope.value = id联动的问题：//页面注...
复制链接

扫一扫