多级手风琴问题离子

时间:2016-01-06 07:33:01

标签: javascript ionic-framework accordion

我是离子的新手,并尝试使用Accordion在我的应用程序中构建多级菜单。当我尝试添加每次点击子类别时关闭的产品时,它从子类别工作正常。

这是我的HTML代码: -

<ion-content class="menu_cont"> <ion-list>
<div ng-repeat="list in wholecatagoryList">
	<ion-item class="item-stable" ng-click="toggleGroup(list)"
		ng-class="{active: isGroupShown(list)}"> <i class="icon"
		ng-class="isGroupShown(list) ? 'ion-minus' : 'ion-plus'"></i> &nbsp;
	{{list.title}} </ion-item>
	<ion-item class="item-accordion"
		ng-repeat="subcatagorylist in list.children"
		ng-show="isGroupShown(list)" ng-click="toggleGroup(subcatagorylist)"
		ng-class="{active: isGroupShown(subcatagorylist)}"> <i
		class="icon"
		ng-class="isGroupShown(subcatagorylist) ? 'ion-minus' : 'ion-plus'"></i>
	&nbsp; {{subcatagorylist.title}}
	<ion-item class="item-accordion"
		ng-repeat="Productlist in subcatagorylist.children"
		ng-show="isGroupShown(subcatagorylist)">
	{{Productlist.title}} </ion-item> 
	</ion-item>

</div>
</ion-list> </ion-content>

这是我的json回复: -

[
{
    "id": "165",
    "title": "Women's Fashion",
    "url": "womens-fashion",
    "children": [
        {
            "id": "176",
            "title": "Women's Aparel",
            "url": "women-s-aparel",
            "children": [
                {
                    "id": "221",
                    "title": "Formal",
                    "url": "formal"
                },
                {
                    "id": "222",
                    "title": "Casual",
                    "url": "casual"
                },
                {
                    "id": "223",
                    "title": "Traditional",
                    "url": "traditional"
                },
                {
                    "id": "224",
                    "title": "Nightwears",
                    "url": "nightwears"
                },
                {
                    "id": "225",
                    "title": "Winter wears",
                    "url": "winter-wears"
                },
                {
                    "id": "240",
                    "title": "Party Wear",
                    "url": "party-wear"
                }
            ]
        }

这是我的toggelGroup代码: -

$scope.wholecatagoryList = [];
if (response.data.length > 0) {
  $scope.wholecatagoryList = response.data;
}

$scope.toggleGroup = function(group) {
  if ($scope.isGroupShown(group)) {
    $scope.shownGroup = null;
  } else {
    $scope.shownGroup = group;
  }
};
$scope.isGroupShown = function(group) {
  return $scope.shownGroup === group;
};

任何帮助将不胜感激。

由于

0 个答案:

没有答案