Question

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

所以使用这个数组...

[
{
    "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
}
]

我正在尝试将这些对象分组......

水果

苹果
香蕉

蔬菜

胡萝卜

肉

鸡

到目前为止，我有一个仅显示对象的转发器......

<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。任何想法？

Answer 1

请参阅下面的演示

＆＃13;

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

＆＃13;

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

＆＃13;

使用AngularJS对对象进行分组

1 个答案: