【问题标题】:Angular filter ng-repeat into seperate lists角度过滤器 ng-repeat 到单独的列表中
【发布时间】:2015-01-30 14:43:09
【问题描述】:

我有一个对象我已经展平以检索特定项目(仅)我正在重复运行。我想知道我是否可以让重复吐出小分组中的项目。

每个项目都有一个类别键,我只想将它们放在按类别分组的 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>

我想知道是否有更好或更优雅的方式来处理这个问题?感谢阅读!

【问题讨论】:

    标签: javascript angularjs


    【解决方案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>
    

    【讨论】:

    • 这太好了,谢谢!有没有办法在对象重复中显示项目上方的类别名称 - 例如 {{myObjGrouped[$index]}}
    • nvm 知道了,它只是 {{category}} 就在第一次重复的正下方。谢谢!!
    猜你喜欢
    • 2014-12-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-16
    • 2015-09-15
    • 2015-05-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多