切換離子列表與子表

Question

我有這個網站：

<div class="list"> 
     <div ng-repeat="category in categories"> 
      <div class="item item-icon-right"> 
       {{category.name}} 
       <i class="icon icon-accessory ion-chevron-right pull-right"></i> 
      </div> 
      <div class="item" ng-repeat="sub_category in category.sub_categories"> 
       {{sub_category.name}} 
      </div> 
     </div> 
</div> 

而且此javascript：

var data = {}; 
data.categories = []; 
data.categories[0] = { 
    id: 1 
    ,name: "Computer" 
    ,sub_categories: [ 
     {id:1,name:"Mac"} 
     ,{id:2,name:"PC"} 
    ] 
}; 
data.categories[1] = { 
    id: 2 
    ,name: "Mobile" 
    ,sub_categories: [ 
     {id:3,name:"Iphone"} 
     ,{id:4,name:"Samsung"} 
    ] 
} 
$scope.categories = data.categories;  

眼下既cateogry和子類別列表中顯示出來。

我需要子類別默認隱藏。並且僅在父母被點擊時才顯示。 我還需要父母的圖標才能從ion-chevron-right變爲ion-chevron-down。

你如何用純角碼來做到這一點？ 我可以用jQuery來做到這一點，但我寧願有一個角度的方法。

我需要讓類別和子類別具有唯一的ID才能訪問它嗎？ 還有另一種更聰明的方法來做到這一點？

Answer 1

查看HTML

<div class="list"> 
    <div ng-repeat="category in categories"> 
     <div class="item item-icon-right"> 
      {{category.name}} 
      <i class="icon icon-accessory ion-chevron-right pull-right" ng-click="showSubcategory($index)"></i> 
     </div> 
    </div> 
    <div ng-if="sub_categories.length"> 
     <div ng-repeat="sub in sub_categories">{{sub.name}}</div> 
    </div> 
</div> 

查看腳本控制器

$scope.sub_categories=[]; 
$scope.showSubcategory=function(index){ 
    $scope.sub_categories=[]; 
    $scope.sub_categories=data.categories[index].sub_categories; 
} 

其實有很多方法，你可以找到多達下去。