前端实现下拉框联动，数组封装成树形结构实现下拉框联动

Angularjs 2019-02-15

一、数组结构的数据，前端处理成叶子节点数据

比如说项目中遇到的一级类目，二级类目，三级类目

只有选择一级类目之后，才可以选择二级类目，选择了二级类目，才可以选择三级类目。当上一级类目选择变了，他下面的各级类目会被清空，没有选择中。

1、模板文件

 2、控制器

/* 一级类目 */$scope.level1Categories = [];$scope.selectedLevel1Category = null;// $scope.selectLevel1Category = function (category) {// $scope.selectedLevel1Category = category;// };/* 二级类目 */$scope.level2Categories = [];$scope.selectedLevel2Category = null;/* 三级类目 */$scope.level3Categories = [];$scope.selectedLevel3Category = null; 
//选择一级类目与二级类目联动$scope.$watch("selectedLevel1Category",function () {    $scope.level2Categories = [];    $scope.selectedLevel2Category = null;    if ($scope.selectedLevel1Category) {        for (var i = 0; i < categories.length; i++) {            if (categories[i].parentCategoryCode == $scope.selectedLevel1Category.categoryCode) {                $scope.level2Categories.push(categories[i]);            }        }    }});//选择二级类目与三级类目联动$scope.$watch("selectedLevel2Category",function () {    $scope.level3Categories = [];    $scope.selectedLevel3Category = null;    if ($scope.selectedLevel2Category) {        for (var i = 0; i < categories.length; i++) {            if (categories[i].parentCategoryCode == $scope.selectedLevel2Category.categoryCode) {                $scope.level3Categories.push(categories[i]);            }        }    }});

 PS：使用的watch监听是否被选中。

//查询所有的类目 ServiceService.queryCategorys().then(function (result) {　　　　　　　　　　//所有类目的数组 categories = result; 　　　　　　　　　　//类目1的下拉数组，和类目1的选中对象 $scope.level1Categories = []; $scope.selectedLevel1Category = null; 
            for (var i = 0; i < categories.length; i++) {
                if (categories[i].categoryLayer == "1") {
                    $scope.level1Categories.push(categories[i]);
                }
            }

            // 为更改为二级目录暂加
            // $scope.selectedLevel1Category = $scope.level1Categories[0];

            $scope.level2Categories = [];
            $scope.selectedLevel2Category = null;

            if ($scope.selectedLevel1Category) {
                for (var i = 0; i < categories.length; i++) {
                    if (categories[i].parentCategoryCode == $scope.selectedLevel1Category.categoryCode) {
                        $scope.level2Categories.push(categories[i]);
                    }
                }
            }

        });</pre>

 PS：一级类目与二级类目，二级类目与三级类目包裹成一个叶子树。

选中的一个是对象不是一个值。

 二、数组结构的数据，前端处理成叶子节点数据（省份与城市的联动）

 后端请求数据

//省份城市信息 $scope.provinceCity = results[1].data;

模板文件

营业执照地址： 
                    <div class="col-xs-4"
                         ng-class="{true:'has-error'}[(applyForm.licenseAddress.$dirty||needSubmit) &amp;&amp; applyForm.licenseAddress.$invalid]"&gt;
                        <input type="text" class="form-control" name="licenseAddress"
                               ng-model="applyInfo.licenseAddress" required ng-readonly="getDataread" maxlength="50"
                               ng-maxlength="50" ng-pattern="/^\S*$/" >
                    </div>
                    <div class="col-xs-6 col-xs-offset-3"&gt;
                        <p class="form-control-static text-muted"&gt;如果找不到所在城市，可以选择所在地区或者上级城市。详细地址不能有空格。</p>
                    </div>
                    <#--<div class="col-xs-3" style="float:right;"-->
                         <#--ng-show="selectedLicenseProvince===null || selectedLicenseCity===null || applyInfo.licenseAddress===''"&gt;-->
                        <#--<span class="text-danger"地址填写不全</span>-->
                    <#--</div>-->
                </div></pre>

控制器js

//营业执照地址 var provinceCity = $scope.provinceCity; console.log(provinceCity); for (var i = 0; i < provinceCity.length; i++) { var province = provinceCity[i]; //营业执照所在地 if (province.provinceCode == result.data.provinceCode) { $scope.selectedLicenseProvince = province; var licenseCityList = province.cityList; for (var j = 0; j < licenseCityList.length; j++) { console.log('cityCode',result.data.cityCode); if (result.data.cityCode!==undefined && licenseCityList[j].cityCode == result.data.cityCode) { $scope.selectedLicenseCity = licenseCityList[j]; break; }else{ $scope.selectedLicenseCity = null; } } } }

欢迎访问：

1、云商城isv系统

 2、云商城消费者门户

相关文章

AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
AngularJS进阶(三十七)IE浏览器兼容性后续
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题，...
AngularJS进阶(五)Angular实现下拉菜单多选
Angular实现下拉菜单多选写这篇文章时，引用文章地址如下：h...
AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
AngularJS进阶(三十四)Angular数据更新不及时问题探讨
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...