使用AngularJs NG-重复集团项目细节 [英] Group item detail using AngularJs ng-repeat

问题描述

我想通过功能的NG-重复内执行组

I would like to perform a group by function inside of an 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重复导致在以下presentation

I would like an ng-repeat that results in the following presentation

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>

这不包括创建单独的数组有什么建议？该数据来找我这样的，这将是很好，以避免操纵它。

Any suggestions that don't include creating separate arrays? The data is coming to me this way and it would be nice to avoid manipulating it.

推荐答案

使用NPM模块！ Lodash可以处理GROUPBY，避免无限循环的角度滤波器所需的记忆化。

Update - the simple, clean way:

Use npm modules! Lodash can handle the groupBy and the memoization needed to avoid an infinite loop as an Angular filter.

npm install lodash

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

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

You may need to use the resolver function of lodash's memoize:

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

不过，我真的相信你应该只是简化了这一切，并在过滤器控制器：

But, I really believe you should just simplify all of this and filter in the controller:

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

老答案：

我建议 GROUPBY 过滤器来修改动态视图中使用的数据。以下是我想出了。该过滤器返回每次这将导致一个无限循环消化一个新的对象，所以我把它包在我服务，修复这些类型的问题。这一个是简单地通过记忆化固定。 记忆化，鉴于相同的参数（输入，道具），完全相同的输出会从缓存中返回，所以相同的对象再次返回，而不是创建一个新的meeans一个看起来是一样的。该过滤器还支持嵌套属性的名称，这样你就可以很容易地通过一个属性组嵌套的对象之内。

Old Answer:

I suggest a groupBy filter to modify the data used in the view on the fly. Here's what I came up with. This filter returns a new object each time which will cause an infinite digest cycle, so I wrapped it in my service that fixes those kinds of problems. This one is simply fixed by memoization. Memoization meeans that given the same parameters (input, prop), the exact same output will be returned from a cache, so the same object is returned again, rather than creating a new one that looks the same. This filter also supports nested property names, so you can easily group by a property nested within the objects.

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

 }])

我的<一个href=\"https://github.com/m59peacemaker/angular-pmkr-components/tree/master/src/services/filterStabilize\"相对=nofollow> filterStabilize 服务应该可以解决任何过滤器，但任何好的 memoize的函数会做在这种情况下（而且大多数情况下）的罚款。

My filterStabilize service should fix any filter, but any good memoize function will do fine in this case (and most cases).

这篇关于使用AngularJs NG-重复集团项目细节的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！