Использование groupBy в угловом репитере

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

На самом деле, вам нужно сгруппировать продукты по 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>

Answer 2

Вам необходимо включить модуль «углового фильтра» в качестве зависимости в вашем объявлении модуля, например:

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

См Getting Started раздел модуля углового фильтра для получения дополнительной информации.