核心提示：angular的三级联动代码实现教程!DOCTYPE htmlhtml ng-app=demoheadmeta charset=UTF-8title/title/headbody ng-control...
angular的三级联动代码实现教程
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="cityOther">
<select ng-model="shengIndex">
<option ng-repeat="sheng in datas" key="$index" ng-value="$index">{{sheng.name}}</option>
</select>
<select ng-model="shiIndex">
<option ng-repeat="shi in datas[shengIndex].city" key="$index" ng-value="$index">{{shi.name}}</option>
</select>
<select ng-model="quIndex">
<option ng-repeat="qu in datas[shengIndex].city[shiIndex].area" key="$index" ng-value="$index">{{qu}}</option>
</select>
</body>
</html>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript">
angular.module("demo",[])
.controller("cityOther",function($scope){
$scope.datas=[{
"name": "北京",
"city": [{
"name": "北京市市辖区",
"area": ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "平谷区", "怀柔区", "密云县", "延庆县"]
}]
},{
"name": "天津市",
"city": [{
"name": "天津市市辖区",
"area": ['和平区','河东区','河西区','南开区','河北区','红桥区','东丽区','西青区','津南区','北辰区','武清区','宝坻区','滨海新区','宁河区','静海区','蓟州区']
}
]
},{
"name": "陕西省",
"city": [{
"name": "西安市",
"area": ['新城区','碑林区','莲湖区','灞桥区','未央区','雁塔区','阎良区','临潼区','长安区','高陵区','蓝田县','周至县','鄠邑区']
},{
"name": "渭南市",
"area": ['临渭区','华州区','潼关县','大荔县','合阳县','澄城县','蒲城县','白水县','富平县','韩城市','华阴市']
}]
}]
$scope.shengIndex=0;
$scope.shiIndex=0;
$scope.quIndex=0;
})
</script>
效果展示：
