Question

我有一个对象，我已经扁平化以检索特定项目（仅），因为我正在重复运行。我想知道我是否可以重复吐出小组中的项目。

每个项目都有一个类别键，我只想将它们放在按类别分组的html中。

我可以做这样的事情 -

<div ng-repeat="item in myObject | category1">{{name}}</div>
<div ng-repeat="item in myObject | category2">{{name}}</div> 
<div ng-repeat="item in myObject | category3">{{name}}</div>

然而，对象中有15个左右的类别和大约80-100个项目，所以我想知道是否有某种方式来编写几行并且有角度处理分布而不是＆＃34;硬编码＆＃ 34;每个类别。此外 - 类别可能会在以后更改，如果开发人员不必进入并更改硬编码类别，这将是很好的。

作为参考，该对象看起来像这样 -

  $scope.myObject = [{'name' : item1' , 'category' : 'category1'},{'name' : item2' , 'category' : 'category2'}];

我的第一个猜测是通过某种过滤来运行对象，这些过滤会吐出要重复的类别数组，然后在重复内部，按重复中的当前项过滤原始对象 -

  //categories is myObject filtered down to an array of categories (1 of each)
  <div ng-repeat="category in categories">
       <div ng-repeat="item in myObject | category">
             {{item.name}}
       </div>
 </div>

我想知道是否有更好或更优雅的方式来解决这个问题？谢谢你的阅读！

Answer 1

如果您使用像lodash这样的库：

，这非常简单

在您的控制器中：

$scope.myObjGrouped= _.groupBy($scope.myObject, 'category');

在您的HTML中：

  <div ng-repeat="(category, objects) in myObjGrouped">
       <div ng-repeat="item in objects">
             {{item.name}}
       </div>
 </div>

角度过滤ng-repeat到单独的列表中

1 个答案: