ionic+AnjularJs實現省市縣三級聯動效果

建議對ionic和AnjularJs有一定了解的人可以用到，很多時候我們要用到選擇省份、城市、區縣的功能，現在就跟着我來實現這個功能吧，用很少的代碼（我這里是根據客戶的要求，只顯示想要顯示的部分省份和其相對應的城市、區縣，並且這些數據將通過后台放入數據庫，並沒有引用完整的城市js）

1.首先在所需要的HTML頁面需要這些代碼，其中的樣式都是自己定義的，不喜歡的可以按照自己喜好來寫：

<div class="list">
            <div class="list" style="border: 0;">
                <label class="item item-input item-select" style="border: 0">
                    <div class="input-label">
                        <span><span style="color: #6e6e6e"> </span></span>
                    </div>
                    <select style="font-size: 16px" ng-model="data.currentProvinceId"
                            ng-options="pp.Id as pp.RegionName for pp in allProvinces"
                            ng-change="switchProvince(data.currentProvinceId)">
                    </select>

                </label>
            </div>
            <div class="list" style="border: 0">
                <label class="item item-input item-select" style="border: 0">
                    <div class="input-label">
                        <span><span style="color: #6e6e6e"> </span></span>
                    </div>
                    <select style="font-size: 16px" ng-options="cc.Id as cc.RegionName for cc in cities"
                            ng-model="data.currentCityId" ng-change="switchCity(data.currentCityId)">
                    </select>
                </label>
            </div>
            <div class="list" style="border: 0">
                <label class="item item-input item-select" style="border: 0">
                    <div class="input-label">
                        <span style="color: #6e6e6e"> </span>
                    </div>
                    <select style="font-size: 16px" ng-options="aa.Id as aa.RegionName for aa in areas"
                            ng-model="data.currentAreaId" ng-change="switchArea(data.currentAreaId)">
                    </select>
                </label>
            </div>

        </div>

2.相應的控制器controller.js里：

.controller('selectCityCtrl', function ($rootScope, $scope, $state, $filter, $ionicHistory, selectCitySvc, storageSvc, scollImageSvc, classIficationItemSvc) {

    $scope.currentCity = selectCitySvc.getCurrentCity();

    $scope.allRegions = selectCitySvc.getCacheAllAreas();

    $scope.allProvinces = [
        {Id: 0, RegionName: '請選擇省份'}
    ];

    $scope.cities = [
        {Id: 0, RegionName: '請選擇城市'}
    ];

    $scope.areas = [
        {Id: 0, RegionName: '請選擇區/縣'}
    ];

    $scope.data = {
        selectName: "",
        currentProvinceId: 0,
        currentCityId: 0,
        currentAreaId: 0
    };

    function getSelectedRegionId() {
        var regionId = $scope.data.currentAreaId;
        if (regionId == 0) {
            regionId = $scope.data.currentCityId;
        }
        if (regionId == 0) {
            regionId = $scope.data.currentProvinceId;
        }
        return regionId;
    }

    function updateSelectRegionName() {
        var currentRegion = $filter('filter')($scope.allRegions, {Id: getSelectedRegionId()}, true)[0];
        if (currentRegion) {
            $scope.data.selectName = currentRegion.RegionName
        } else {
            $scope.data.selectName = '';
        }
    }

    $scope.switchProvince = function (currentProvinceId) {
        $scope.data.currentCityId = 0;
        $scope.data.currentAreaId = 0;

        $scope.cities.splice(1);
        $scope.areas.splice(1);

        var cities = $filter('filter')($scope.allRegions, {RegionType: 1, ParentId: currentProvinceId});
        for (var i in cities) {
            $scope.cities.push(cities[i]);
        }

        updateSelectRegionName();
    };

    $scope.switchCity = function (currentCityId) {
        $scope.data.currentAreaId = 0;

        $scope.areas.splice(1);

        var areas = $filter('filter')($scope.allRegions, {RegionType: 2, ParentId: currentCityId});
        for (var i in areas) {
            $scope.areas.push(areas[i]);
        }

        updateSelectRegionName();
    };

    //增加當切換縣區的時候更換服務區名
    $scope.switchArea = function (currentAreaId) {
        updateSelectRegionName();
    };

    var allProvinces = $filter('filter')($scope.allRegions, {RegionType: 0});
    for (var i in allProvinces) {
        $scope.allProvinces.push(allProvinces[i]);
    }

    if ($scope.currentCity.RegionType == 0) {
        // 如果上次選擇省份
        $scope.data.currentProvinceId = $scope.currentCity.Id;
        $scope.switchProvince($scope.currentCity.Id);
    } else if ($scope.currentCity.RegionType == 1) {
        var province = $filter('filter')($scope.allRegions, {Id: $scope.currentCity.ParentId}, true)[0];
        $scope.data.currentProvinceId = province.Id;
        //省份
        $scope.switchProvince(province.Id);
        $scope.data.currentCityId = $scope.currentCity.Id;
        $scope.switchCity($scope.currentCity.Id);
    } else if ($scope.currentCity.RegionType == 2) {
        // 如果上次選擇縣區
        var city = $filter('filter')($scope.allRegions, {Id: $scope.currentCity.ParentId}, true)[0];
        var province = $filter('filter')($scope.allRegions, {Id: city.ParentId}, true)[0];

        $scope.data.currentProvinceId = province.Id;
        $scope.switchProvince(province.Id);
        $scope.data.currentCityId = city.Id;
        $scope.switchCity(city.Id);
        $scope.data.currentAreaId = $scope.currentCity.Id;
    }
    $scope.user = {
        province: "" || storageSvc.load('province.RegionName'),
        city: "" || storageSvc.load('city.RegionName'),
        area: "" || storageSvc.load('area.RegionName'),
        currentCity: "" || storageSvc.load('selectCitySvc.getCurrentCity()')

    };

});

3.效果如圖：