angular三级联动

最新推荐文章于 2019-08-18 13:46:34 发布

攀岩嘉

最新推荐文章于 2019-08-18 13:46:34 发布

阅读量790

点赞数

分类专栏：网页

网页专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.proList = [{
"amode": "河南",
"citys": [{
"name": "郑州",
"area": [{
"aname": "郑1区"
}, {
"aname": "郑2区"
}]
},
{
"name": "开封",
"area": [{
"aname": "开1区"
}, {
"aname": "开2区"
}]
}
]
},
{
"amode": "河北",
"citys": [{
"name": "石家庄",
"area": [{
"aname": "石1区"
}, {
"aname": "石2区"
}]
},
{
"name": "邯郸",
"area": [{
"aname": "邯1区"
}, {
"aname": "邯2区"
}]
}
]
}
];
$scope.proChange = function() {
$scope.select2 = $scope.select1.citys[0];
$scope.select3 = $scope.select2.area[0];
}
$scope.cityChange = function() {
$scope.select3 = $scope.select2.area[0];
}
});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<div>
<select style="width: 120px;" ng-init="select1=proList[0]" ng-model="select1" ng-change="proChange();" ng-options="item.amode for item in proList"></select>
<select style="width: 120px;" ng-init="select2=select1.citys[0]" ng-change="cityChange();" ng-model="select2" ng-options="data1.name for data1 in select1.citys"></select>
<select style="width: 120px;" ng-init="select3=select2.area[0]" ng-model="select3" ng-options="a.aname for a in select2.area"></select>
</div>
</body>

</html>