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

您可能需要使用lodash的memoize的resolver功能：

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修复。给定相同参数（输入，prop）的Memoization meeans，将从缓存返回完全相同的输出，因此再次返回相同的对象，而不是创建看起来相同的新对象。此过滤器还支持嵌套属性名称，因此您可以轻松地按嵌套在对象中的属性进行分组。

Live Demo

<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函数都可以正常运行。

Answer 2

试试这样：

  <div class="container">
      <div  class="row" ng-repeat="(key, value) in items| groupBy: 'widgetId'">
        <div>widgetId: {{ key }}</div>
        <div>  
          <div ng-repeat="color in value">
            colorId: {{color.colorId}} 
          </div>
        </div>
      </div>
    </div>

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

2 个答案:

更新 - 简单，干净的方式：

旧答案：

Live Demo