使用AngularJS对对象进行分组

我在数组中有一堆对象，我试图弄清楚如何在Angular repeater中对它们进行分组。例如，我想用parentTag键将水果项分组到父项的标签键。所以Fruit的标签为1，而Apple的父标签的值为1，这意味着Apple与Fruit分组。使用AngularJS对对象进行分组

，因此使用此阵...

[ 
{ 
    "code":"Fruit", 
    "tag":1 
}, 
{ 
    "code":"Apple", 
    "tag":2, 
    "parentTag":1 
}, 
{ 
    "code":"Vegetable", 
    "tag":3 
}, 
{ 
    "code":"Meat", 
    "tag":4 
}, 
{ 
    "code":"Banana", 
    "tag":5, 
    "parentTag":1 
}, 
{ 
    "code":"Carrot", 
    "tag":6, 
    "parentTag":3 
}, 
{ 
    "code":"Chicken", 
    "tag":7, 
    "parentTag":4 
} 
]

我想对对象进行分组这样的...

水果

苹果
香蕉

Vegeta竹叶提取

胡萝卜

肉类

到目前为止，我有只显示对象的中继器...

<div ng-repeat="product in products"> 
{{code}} 
<span ng-if="product.tag != null">{{product.tag}}</span> 
<span ng-if="product.parentTag > null">{{product.parentTag}}</span> 
</div>

但是我不知道如何在这种情况下使用groupBy。有任何想法吗？

来源

2015-04-01 Jose the hose

可能重复http://stackoverflow.com/questions/14800862/how- can-i-group-data-with-an-angular-filter） – Caramiriel 2015-04-01 10:48:13

它不一样 - 我试图将parentTags与标签和组匹配。另一个链接是直接'groupBy' – 2015-04-01 10:51:23

你必须为你的需要创建一个json结构。这是做到这一点的最佳方式。 – hurricane 2015-04-01 10:55:30

请参阅下面的演示

var app = angular.module('app', []); 
 

 
app.controller('homeCtrl', function($scope) { 
 

 
    $scope.products = [{ 
 
    "code": "Fruit", 
 
    "tag": 1 
 
    }, { 
 
    "code": "Apple", 
 
    "tag": 2, 
 
    "parentTag": 1 
 
    }, { 
 
    "code": "Vegetable", 
 
    "tag": 3 
 
    }, { 
 
    "code": "Meat", 
 
    "tag": 4 
 
    }, { 
 
    "code": "Banana", 
 
    "tag": 5, 
 
    "parentTag": 1 
 
    }, { 
 
    "code": "Carrot", 
 
    "tag": 6, 
 
    "parentTag": 3 
 
    }, { 
 
    "code": "Chicken", 
 
    "tag": 7, 
 
    "parentTag": 4 
 
    }]; 
 

 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body> 
 
    <div ng-app="app"> 
 
    <div ng-controller="homeCtrl"> 
 
     <div ng-repeat="product in products | filter :{parentTag:'!'}"> 
 
     <h3>{{product.code}}</h3> 
 
     <div ng-repeat="subproduct in products | filter :{parentTag:product.tag}"> 
 
      <span>{{subproduct.code}}</span> 
 
      <span>{{subproduct.tag}}</span> 
 
      <span>{{subproduct.parentTag}}</span> 
 
     </div> 
 

 

 
     </div> 
 
    </div> 
 
</body>

的[我怎么能与一个角度滤波器组数据？（

来源

2015-04-01 11:04:06 sylwester

感谢您的回答。你为什么放一个！放入parentTag：'！'？ – 2015-04-01 12:08:59

@Josethehose只显示那些没有得到parentTag指定的产品 – sylwester 2015-04-01 12:19:34

好的 - 它工作，但我不得不将其更改为parentTag：emptyOrNull – 2015-04-01 13:58:55

使用AngularJS对对象进行分组

回答

相关问题