Angularjs 省市區級聯

Json 地區文件：http://blog.csdn.net/youshi520000/article/details/70808580

angularjs

angular.module('app')
    .controller('inbillofladingCtrl', ['$scope', '$filter', '$location', 'alertify', 'transferService', 'pagerService','inbillofladingService',
        function ($scope, $filter, $location, alertify, transferService, pagerService, inbillofladingService) {
            $scope.chinaCities = CityAreaList;
            //省份切換
            $scope.changeProvince = function () {
                var province = $scope.searcher.ShipAddressProvince;
                if (!angular.equals("", province)) {
                    $scope.CityList = $scope.chinaCities.find(c => c.name === province).city;
                } else {
                    $scope.CityList = null;
                    $scope.AreaList = null;
                }
            }
            //城市切換
            $scope.changeCity = function () {
                var city = $scope.searcher.ShipAddressCity;
                if (!angular.equals("", city)) {
                    $scope.AreaList = $scope.CityList.find(c=>c.name===city).area;
                } else {
                    $scope.AreaList = null;
                }
            }
        }]);

 

html

 選擇省：
            <select ng-model="searcher.ShipAddressProvince" ng-change="changeProvince()">
                <option value="">請選擇</option>
                <option ng-repeat="v in chinaCities" value="{{v.name}}">{{v.name}}</option>
            </select>
            選擇市：
            <select ng-model="searcher.ShipAddressCity" ng-change="changeCity()">
                <option value="">請選擇</option>
                <option ng-repeat="v in CityList" value="{{v.name}}">{{v.name}}</option>
            </select>
            選擇區：
            <select ng-model="searcher.ShipAddressArea">
                <option value="">請選擇</option>
                <option ng-repeat="v in AreaList" value="{{v}}">{{v}}</option>
            </select>