AngularJS实现三级级联下拉选择框 -

bijian1013

浏览: 3244538 次
性别:
来自: 深圳

最近访客更多访客>>

seal1002

dy.f

godandghost

lovefiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

AngularJS实现三级级联下拉选择框

博客分类：

AngularJS

angularjs javaScript

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: '加利福尼亚州'
      }
    ]
  }
]);

运行结果：