angularJs实现级联操作

angular实现级联非常的方便比起传统的jq和js来说，一般我们肯定是从后台获取一个list，然后生成一个下拉框，然后选中一个下拉框，得到id，再得到下一个list。

这些angular都给我做好了很好的封装，我们只需要几个angular提供的几个属性就可以实现。超级方便。看代码

 

js（目的是得到list）

//查询一级商品分类列表
    $scope.selectItemCat1List=function(){

        itemCatService.findByParentId(0).success(
            function(response){
                $scope.itemCat1List=response;
            }
        );

    }

    //查询二级商品分类列表
    $scope.$watch('entity.goods.category1Id',function(newValue,oldValue){

        itemCatService.findByParentId(newValue).success(
            function(response){
                $scope.itemCat2List=response;
            }
        );

    });

    //查询三级商品分类列表
    $scope.$watch('entity.goods.category2Id',function(newValue,oldValue){

        itemCatService.findByParentId(newValue).success(
            function(response){
                $scope.itemCat3List=response;
            }
        );

    });

 

解释一下：第一个用的是平常自定义一个方法，因为他的父id为0，加载页面的时候初始化一下这个方法就ok，后两个利用的是angular的监控变量的方法，记住就行了，目的是监控定义的变量，然后触发这个方法实现动态效果，平常我们都用点击事件的方法触动。原理都一样。实现的方法不一样而已。

 

html

<table>
     <tr>
         <td>
             <select class="form-control" ng-model="entity.goods.category1Id"  ng-options="item.id as item.name for item in itemCat1List" ></select>
          </td>
          <td>
              <select class="form-control select-sm" ng-model="entity.goods.category2Id"  ng-options="item.id as item.name for item in itemCat2List"></select>
          </td>
           <td>
              <select class="form-control select-sm"  ng-model="entity.goods.category3Id"  ng-options="item.id as item.name for item in itemCat3List"></select>
           </td>
           <td>
              模板ID:{{entity.goods.typeTemplateId}}
           </td>
      </tr>
 </table>

ng-model 意思是你选中的值会放到这个变量中去。

ng-option 里面的作用是  遍历这个list值 显示的是 每个对象的item.name  实际选中带的值是 item.id