AngularJS groupBy orderBy答案

【问题标题】：AngularJS groupBy orderByAngularJS groupBy orderBy
【发布时间】：2016-07-05 10:03:00
【问题描述】：

使用 angular.filter 我正在使用 groupBy 和 length 来计算用户 emailId 记录的记录数

           <div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId'">
                 <h3>{{ key }} {{ filteredList.length}}</h3>
                 <li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
           </div>

这一切都很好，给了我一个 emailId 的列表，每个 emailId 的记录数和下面列出的记录。

我试图做的是按每个 emailId 的记录数对数据进行排序（换句话说，按 {{filteredList.length}} 返回的值对数据进行排序）。

我已尝试将 orderBy 添加到 ng-repeat，如下所示

      <div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId' | orderBy: filtered.length">
             <h3>{{ key }} {{ filteredList.length}}</h3>
             <li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
       </div>

但这对列出项目的顺序没有任何影响。我已经查看了一个现有的答案，但所有未与 groupBy 一起使用的 orderBy 似乎是指按包含在值中的项目而不是过滤器的长度进行排序。

【问题讨论】：

标签： angularjs angular-filters

【解决方案1】：

angular-filter 的用户组在下面的链接中写了需要做的事情： https://github.com/a8m/angular-filter/issues/57#issuecomment-65041792

groupBy 返回一个对象，但 orderBy fiter 需要一个数组。所以使用 toArray:true 并给 orderBy 一个可以使用的数组。

下面是必须工作的代码：

   <div ng-repeat="(key, value) in leaderboard | groupBy: 'emailId' | toArray: true |orderBy: filtered.length">
         <h3>{{ key }} {{ filteredList.length}}</h3>
         <li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
   </div>

另外，请记住 orderBy 必须是链接中的最后一个过滤器。

编辑

您还可以切换 orderBy 和 groupBy 的位置。如果 OrderBy 过滤器排在第一位，它会排序，然后 groupBy 过滤器在没有 toArray 过滤器的情况下初始化

例子：

<div ng-repeat="(key, value) in array | orderBy: filtered.length | groupBy: 'emailId'">
             <h3>{{ key }} {{ filteredList.length}}</h3>
             <li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
       </div>

【讨论】：

谢谢，现在可以工作了，但我需要撤销 orderBy。我试过:reverse，但似乎没有什么不同。 reverse可以和toArray一起使用
没关系，我需要使用:true 而不是:reverse
避免一些 2 路绑定，这样性能会变得更好；）
过滤器来自哪里？，我在代码中看不到它

【解决方案2】：

这可以很容易地通过先排序然后分组来解决。更好的性能。

<div ng-repeat="(key, value) in leaderboard | orderBy: filtered.length" | groupBy: 'emailId'>
    <h3>{{ key }} {{ filteredList.length}}</h3>
    <li ng-repeat="leaderboard in value | filter: emailId as filteredList"></li>
 </div>

【讨论】：