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