角度过滤器ng重复到单独的列表中

Angular filter ng-repeat into seperate lists

本文关键字：单独 列表 过滤器 ng      更新时间：2023-09-26

我有一个对象，我已经展平以检索特定项目（仅）我正在重复运行。我想知道我是否可以让重复者以小组形式吐出这些项目。

每个项目都有一个类别键，我只想将它们放在按类似类别分组的 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 个项目，所以我想知道是否有某种方法可以写几行并让角度处理分布而不是"硬编码"每个类别。另外 - 类别可能会在以后更改，如果开发人员不必进来更改硬编码类别，那就太好了。

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

  $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>

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

如果你使用像 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>
相关文章：