下拉列表(动态)级联操作

下拉列表的级联操作

运用场景

当用户选择一级分类后，二级分类列表要相应更新，当用户选择二级分类后，三级列表要相应更新。

实现：

利用 angularJS 实现，引入js文件等省略

1. 实现一级下拉列表

在controller里面：

//商品一级分类列表
$scope.selectItemCat_1List = function () {
   itemCatService.findByParentId(0).success(function (response) {
      $scope.itemCat_1List = response;
       });
   };

页面：

使用AngularJS自身的指令"ng-options"来完成显示

​ ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。

​ ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如：减少内存提高速度，以及提供选择框的选项来让用户选择。

在页面body里面初始化：ng-init=*"selectItemCat1List()"*

<tr>
   <td>  <!--一级下拉列表-->
      <select class="form-control" ng-model="entity.goods.category1Id" ng-options="itemCat.id as itemCat.name for itemCat in itemCat_1List">
      </select>
   </td>
   <td>		<!--二级下拉列表-->
      <select class="form-control select-sm" ng-model="entity.goods.category2Id" ng-options="itemCat.id as itemCat.name for itemCat in itemCat_2List"></select>
   </td>
   <td>      <!--二级下拉列表-->
      <select class="form-control select-sm" ng-model="entity.goods.category3Id" ng-options="itemCat.id as itemCat.name for itemCat in itemCat_3List"></select>
   </td>
</tr>

2. 实现二、三级下拉列表

利用AngularJS自身封装的一个“$watch”对象来实现动态监听（下拉框的动态级联操作）。$watch方法用于监控某个变量的值，当被监控的值发生变化，就自动执行相应的函数。

通过$scope.$watch()来调用。

参数：监听的对象、执行的方法function(newValue,oldValue)

//商品二级分类列表
$scope.$watch('entity.goods.category1Id',function (newValue, oldValue) {
       //alert(newValue)
       itemCatService.findByParentId(newValue).success(function (response) {
           $scope.itemCat_2List = response;
       });
   })

//商品三级分类列表
$scope.$watch('entity.goods.category2Id',function (newValue, oldValue) {
       //alert(newValue)
       itemCatService.findByParentId(newValue).success(function (response) {
           $scope.itemCat_3List = response;
       })
   })
(response) {
           $scope.itemCat_3List = response;
       })
   })