切换离子列表与子表

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; 
} 

其实有很多方法，你可以找到多达下去。