index.html
<!doctype html>
<html ng-app="ngShowcaseApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-1.9.1.js"></script>
<script src="angular1.2.15.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="data.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body ng-controller="ngShowcaseController">
<div class="row">
<div class="col-md-4">
<select class="form-control" ng-model="vm.country" ng-options="country.label for country in vm.countries">
<option value="">-- 请选择国家 --</option>
</select>
</div>
<div class="col-md-4" ng-if="vm.country.provinces">
<select class="form-control" ng-model="vm.province"
ng-options="province.label for province in vm.country.provinces">
<option value="">-- 请选择省份/州 --</option>
</select>
</div>
<div class="col-md-4" ng-if="vm.province.cities">
<select class="form-control" ng-model="vm.city" ng-options="city.label for city in vm.province.cities">
<option value="">-- 请选择城市/县区 --</option>
</select>
</div>
</div>
<div>您选择的是:{{vm.country.label}} - {{vm.province.label}} - {{vm.city.label}}</div>
<div class="alert alert-info">
这里使用ng-if指令来达到下一级有数据才显示下一级的效果
</div>
</body>
</html>
app.js
'use strict'; /* App Module */ var md = angular.module('ngShowcaseApp', ['ctrl.select.cascade']);
controllers.js
'use strict'; /* Controllers */ var controllerModule = angular.module("ctrl.select.cascade", []); var ctrl = [ '$scope', 'CityData', function( $scope, CityData ) { var vm = $scope.vm = {}; vm.countries = CityData; // 更换国家的时候清空省 $scope.$watch('vm.country', function(country) { vm.province = null; }); // 更换省的时候清空城市 $scope.$watch('vm.province', function(province) { vm.city = null; }); }]; controllerModule.controller( "ngShowcaseController", ctrl );
data.js
'use strict'; angular.module('ngShowcaseApp').constant('CityData', [ { label: '中国', flag: 'cn.png', provinces: [ { label: '北京', cities: [ { label: '朝阳区' }, { label: '宣武区' }, { label: '海淀区' } ] }, { label: '河北', cities: [ { label: '石家庄' }, { label: '承德' }, { label: '唐山' } ] } ] }, { label: '美国', flag: 'us.png', provinces: [ { label: '纽约', cities: [ { label: '曼哈顿区' }, { label: '皇后区' } ] }, { label: '德克萨斯州', cities: [ { label: '休斯顿' }, { label: '达拉斯' } ] }, { label: '加利福尼亚州' } ] } ]);
运行结果:
参考资源:http://www.ngnice.com/showcase/#/select/cascade?utm_source=TZ