angularjs 实现 三级省市区联动,可实现无限级联动

一个select标签实现省市区三级联动

html 代码:
# 页面调用组件
<select-component ng-repeat="field in data.fieldsList track by $index"
                  options="optionsMap[field]" name="field"
                  change-fun="change(status)"></select-component>
component 代码:

angular
    .module("app")
    .component("selectComponent", {
        bindings: {
            options: "=",
            name:"=",
            changeFun:"&",
        },
        template: `
           <select ng-change="vm.changeFun({status:{'name':vm.name, 'value':selectVal}})" ng-model="selectVal">
           <option value="{{item}}" ng-repeat="item in vm.options">{{item}}</option>
           </select>
        `,
        controllerAs: "vm",

    });
// controller代码

angular
    .module("app")
    .controller("selectController", [
    "$scope",
    function ($scope) {
        $scope.init = function () {
            $scope.data = {
                areaInfo: {
                    "浙江省": {
                        "杭州市": ["西湖区", "余杭区"],
                        "温州市": ["开发区", "高开区"]
                    },
                    "河北省": {
                        "邯郸市": ["复兴区", "邯山区"],
                        "石家庄": ["裕华区", "西城区"]
                    },
                    "河南省": {
                        "安阳市": ["汤阴区", "开发区"],
                        "郑州市": ["二金区", "岭西区"]
                    }
                },
                fieldsList: ["province", "city", "area"],
            };
        };
        $scope.init();
        $scope.optionsMap = {
            "province": Object.keys($scope.data.areaInfo),
            "city": [],
            "area": [],
            "selectStatus": {},
        };
        $scope.change = function (status) {
            if (status["name"] === "province") {
                $scope.optionsMap.city = Object.keys($scope.data.areaInfo[status["value"]]);
                $scope.optionsMap.selectStatus.province = status["value"];
            }
            else if (status["name"] === "city") {
                var pro = $scope.optionsMap.selectStatus.province;
                $scope.optionsMap.area = $scope.data.areaInfo[pro][status["value"]];
            }
        };
    }]);

猜你喜欢

转载自blog.csdn.net/weixin_42174361/article/details/80931943