Question

我有这个HTML：

foreign key constraint error

这个javascript：

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

现在显示包含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;
}

实际上有很多方法，你可以找到尽可能多的方式。

用子列表切换离子列表

1 个答案: