一个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" ,
});
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" ]];
}
};
}]);