angular 的select标签以及联动

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>

angular 的select标签以及联动相关推荐

html select联动,select标签实现二级联动
效果如下图所示: 实现的原理:使用onchange事件,原理见代码 html代码: 魏国蜀国吴国 script代码: var select = document.getElementById(&q ...
select标签的使用
2019独角兽企业重金招聘Python工程师标准>>> select标签的使用 Javascript获取select下拉框选中的的值 jquery方法(前提是已经加载了jquery库 ...
Select 标签可输入
本身select标签是不能输入的,但我们可以通过JS来控制下面给出一个小例子 <div style="position:relative;"> <s ...
struts2中s:select标签的使用
1 静态生成 <s:select name="user.sex" list="#{'0':'男','1':'女'}" label="性别&quo ...
struts中select标签的使用
1 静态生成 <s:select name="user.sex" list="#{'0':'男','1':'女'}" label="性别&quo ...
php 修改select标签,JS修改input,textarea,select标签的可读可写属性
通过JS修改input,textarea,select标签的可读可写属性首先,控制input,与textarea只读属性是 readonly 在js中可以这样去改变,这里要注意js中O要大写 re ...
Jquery获取select标签的值、文本方式
转载地址:http://fireflywithcat.iteye.com/blog/1581183 首先看html代码: Html代码 <select multiple="mult ...
c# select标签绑定枚举,并以Description做Text显示
今天在做项目时遇到一个问题: 开发中有些字段是枚举类型如 Dept 企业表中可能有个字段 Property 性质 0:事业单位,1:私企,2:外企,但有时我们不会单独为性质这个字段定义一张表, 而是在 ...
Layui中Jquery动态设置的select标签加载时而正常时而失效问题排查和解决
1.背景前段使用Layui框架,jQuery动态设置的下拉框select标签,加载时而正常时而失效. 本地调试完全没有问题,但是在服务器运行加载成功和失败的比例五五开. 2.解决问题原因:Layu ...

angular 的select标签以及联动

angular 的select标签以及联动相关推荐

最新文章

热门文章