счетчик значение ключа с угловой нг-повтором

Question

У меня есть массив элементов, которые я повторяющиеся по сравнению с использованием нг-повтора и я использую фильтр

это мой массив

var items = [ 
    { product_id : 1, quantity : 2 } 
    { product_id : 1, quantity : 3 } 
    { product_id : 2, quantity : 2 } 
    { product_id : 3, quantity : 4 } 
    { product_id : 2, quantity : 8 } 
]; 

Я хотел бы ng-repeat, который приводит к следующей презентации

| product_id 1 | quantity 5 | 
| product_id 2 | quantity 10 | 
| product_id 3 | quantity 4 | 

Любые предложения?

Answer 1

Попытка вложении нг-повторить тег в HTML-теги, как это так,

<div ng-repeat 1> 
    <div ng-repeat 2> 
    <!-- where you need the data --> 
    </div> 
</div> 

Answer 2

Вам нужно создать свой собственный фильтр. Нужна работа над фильтром ниже, чтобы получить добавление количества с такими же product_id.

Разметка

<div ng-repeat="i in items | orderBy: 'product_id' |groupBy:'product_id':'quantity'"> 
    {{i.product_id}}| {{i.quantity}} 
</div> 

Фильтр

app.filter('groupBy', function() { 
    return function(values, property1, property2) { 
     var groupByArray = []; 
     console.log("Initialize"); 
     angular.forEach(values, function(value, index) { 
      var lengthOfGroupBy = groupByArray.length; 
      if (lengthOfGroupBy == 0 || groupByArray[lengthOfGroupBy - 1][property1] != value[property1]) { 
       groupByArray.push(value); 
      } 
     }); 
     return groupByArray; 
    } 
}); 

Working Fiddlle

ОБНОВЛЕНИЕ

Я пробовал дальше и успешно реализовывать то, что вы хотите, оно работает, но в консоли есть ошибка, которая говорит "Error: 10 $digest() iterations reached. Aborting!”

Вот мой Updated Fiddle с ошибкой в ​​консоли.

Я нашел solution on SO, который работает для той же проблемы.

Answer 3

Хотя это старый вопрос, я увидел, что я могу ответить на это более четко.

Я использую модуль angular-filter для получения groupBy фильтра.

angular.module('app', ['angular.filter']). 
 
controller('ctrl', function($scope) { 
 
    $scope.data = [ 
 
    { product_id : 1, quantity : 2 }, 
 
    { product_id : 1, quantity : 3 }, 
 
    { product_id : 2, quantity : 2 }, 
 
    { product_id : 3, quantity : 4 }, 
 
    { product_id : 2, quantity : 8 } 
 
    ]; 
 
}). 
 
filter('total', function() { 
 
    return function(arr, prop) { 
 
    return arr.reduce(function(previousValue, currentObj) { 
 
     return previousValue + currentObj[prop]; 
 
    }, 0); 
 
    } 
 
});

<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.4.7/angular-filter.js"></script> 
 

 
<div data-ng-app="app" data-ng-controller="ctrl"> 
 
    <div data-ng-repeat="(key, value) in data | groupBy : 'product_id'"> 
 
    | product_id {{key}} | quantity {{value | total: 'quantity'}} 
 
    </div> 
 
</div>

Update

Существует лучший способ известково сумма каждой группы благодаря, опять же, к angular-filter (и @toddbranch). Чтобы рассчитать общее количество, вы можете использовать фильтр map и sum. как это:

{{value | map: 'quantity' | sum}} 

И полную демо:

angular.module('app', ['angular.filter']). 
 
controller('ctrl', function($scope) { 
 
    $scope.data = [ 
 
    { product_id : 1, quantity : 2 }, 
 
    { product_id : 1, quantity : 3 }, 
 
    { product_id : 2, quantity : 2 }, 
 
    { product_id : 3, quantity : 4 }, 
 
    { product_id : 2, quantity : 8 } 
 
    ]; 
 
});

<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.4.7/angular-filter.js"></script> 
 

 
<div data-ng-app="app" data-ng-controller="ctrl"> 
 
    <div data-ng-repeat="(key, value) in data | groupBy : 'product_id'"> 
 
    | product_id {{key}} | quantity {{value | map: 'quantity' | sum}} 
 
    </div> 
 
</div>