使用AngularJs ng-repeat分组项目详细信息

Question

我想在ng-repeat内执行一组功能

鉴于以下数据:

var items = [];
items.push({ id: 1, widgetId: 54, colorId: 45 });
items.push({ id: 2, widgetId: 54, colorId: 72 });
items.push({ id: 3, widgetId: 54, colorId: 29 });
items.push({ id: 4, widgetId: 55, colorId: 67 });
items.push({ id: 5, widgetId: 55, colorId: 29 });
items.push({ id: 6, widgetId: 56, colorId: 29 });
items.push({ id: 7, widgetId: 56, colorId: 72 });
items.push({ id: 8, widgetId: 57, colorId: 75 });

我想要一个ng-repeat导致以下演示

widgetId 54    colorId: 45 colorId: 72 colorId 29
widgetId 55    colorId: 67 colorId: 29
widgetId 56    colorId: 29 colorId: 72
widgetId 57    colorId: 75

......和标记

<div class="container">
<div class="row">
    <div>widgetId: 54</div>
    <div>
        <div>colorId: 45</div>
        <div>colorId: 72</div>
        <div>colorId: 29</div>
    </div>
</div>
<div class="row">
    <div>widgetId: 55</div>
    <div>
        <div>colorId: 67</div>
        <div>colorId: 29</div>
    </div>
</div>
<div class="row">
    <div>widgetId: 56</div>
    <div>
        <div>colorId: 29</div>
        <div>colorId: 72</div>
    </div>
</div>
<div class="row">
    <div>widgetId: 57</div>
    <div>
        <div>colorId: 75</div>
    </div>
</div>
</div>

任何不包括创建单独数组的建议？数据以这种方式传递给我,避免操纵它会很好.

Answer 1

更新 - 简单,干净的方式:

使用npm模块!Lodash可以处理groupBy以及避免无限循环作为Angular过滤器所需的memoization.

npm install lodash

var memoize = require('lodash/function/memoize');
var groupBy = require('lodash/collection/groupBy');
app.filter('groupBy', function() {
  return memoize(groupBy);
});

您可能需要使用resolverlodash的memoize功能:

app.filter('groupBy', function() {
  return memoize(function() {
    return groupBy.apply(null, arguments);
  }, function() {
    return JSON.stringify([].slice.call(arguments));
  });
});

但是,我真的相信你应该简化所有这些并在控制器中过滤:

$scope.foo = function() { // run this when user clicked button, etc
  $scope.groupedItems = groupBy($scope.items, 'stuff');
};

旧答案:

我建议使用groupBy过滤器来动态修改视图中使用的数据.这就是我想出来的.此过滤器每次都会返回一个新对象,这将导致无限的摘要周期,因此我将其包装在我的服务中以修复这些类型的问题.这个只是固定的memoization.Memoization给定相同参数(输入,prop)的meeans,将从缓存返回完全相同的输出,因此再次返回相同的对象,而不是创建看起来相同的新对象.此过滤器还支持嵌套属性名称,因此您可以轻松地按嵌套在对象中的属性进行分组.

现场演示

<div class="container">
  <div class="row" ng-repeat="(setKey, set) in items | groupBy:'widgetId'">
    WidgetId: {{setKey}}
    <div ng-repeat="item in set">
      ColorId: {{item.colorId}}
    </div>
  </div>
</div>

过滤器:

.filter('groupBy', [
  '$parse', 
  'pmkr.filterStabilize', 
  function($parse, filterStabilize) {

    function groupBy(input, prop) {

      if (!input) { return; }

      var grouped = {};

      input.forEach(function(item) {
        var key = $parse(prop)(item);
        grouped[key] = grouped[key] || [];
        grouped[key].push(item);
      });

      return grouped;

    }

    return filterStabilize(groupBy);

 }])

我的filterStabilize服务应该修复任何过滤器,但memoize在这种情况下(大多数情况下)任何好的功能都可以.