- <!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>
效果展示:
来源: https://www.2cto.com/kf/201803/734508.html