Question

我有一些JSON，我在角度转发器中显示。我需要将结果分组到转发器中，并且我看起来没有工作

使用此JSON ...

{  
"Products":[  
  {  
     "Code":"ELA-67",
     "Site":"SITE1",
     "Attributes":{  
        "Term":"36",
        "quantity":1
     }
  },
  {  
     "Code":"ELI-45",
     "Site":"SITE2",
     "Attributes":{  
        "Term":"36",
        "quantity":1
     }
  },
  {  
     "Code":"COA-56",
     "Site":"SITE1",
     "Attributes":{  
        "Term":"36",
        "quantity":1
     }
  },
  {  
     "Code":"COY-67",
     "Site":"SITE2",
     "Attributes":{  
        "Term":"36",
        "quantity":1
     }
  }

] }

我想创建此布局

SITE1

ELA-67
COA-56

SITE2

ELI-45
COY-67

我试图使用groupBy函数......

<div ng-repeat="Products in productAttributes.Products | groupBy: 'Products.Code'>
Product name: {{Products.Code}}
Site location: {{Products.Site}}
</div>

但我收到的错误低于......

错误：错误：unpr 未知的提供商未知提供者：groupByFilterProvider

有什么想法吗？

Answer 1

您需要包含角度过滤器＆＃39;模块作为模块声明中的依赖项，如下所示：

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

有关详细信息，请参阅角度滤波器模块的Getting Started部分。

Answer 2

实际上，您需要按Site而不是Code对产品进行分组：

var demoApp = angular.module('demoApp', ['angular.filter']);

demoApp.controller('DemoController', function ($scope) {

    $scope.productAttributes = {
        "Products": [{
            "Code": "ELA-67",
                "Site": "SITE1",
                "Attributes": {
                "Term": "36",
                    "quantity": 1
            }
        }, {
            "Code": "ELI-45",
                "Site": "SITE2",
                "Attributes": {
                "Term": "36",
                    "quantity": 1
            }
        }, {
            "Code": "COA-56",
                "Site": "SITE1",
                "Attributes": {
                "Term": "36",
                    "quantity": 1
            }
        }, {
            "Code": "COY-67",
                "Site": "SITE2",
                "Attributes": {
                "Term": "36",
                    "quantity": 1
            }
        }]
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.min.js"></script>
<div ng-app="demoApp" ng-controller="DemoController">
    <ul ng-repeat="(key, value) in productAttributes.Products | groupBy: 'Site'">{{ key }}
        <li ng-repeat="site in value">{{site.Code}}</li>
    </ul>
</div>

在角度转发器中使用groupBy

2 个答案: