如何使用 AngularJS orderBy答案

【问题标题】：How to use AngularJS orderBy如何使用 AngularJS orderBy
【发布时间】：2014-10-09 02:26:09
【问题描述】：

我认为我的语法不正确？我可以在 Angular 中做到这一点吗？前两个过滤器有效，但顺序无效

<div class ="col-md-8 pull-left">
      <span ng-click="myFilter = {green: true}">Clean</span>  |
      <span ng-click="myFilter = {green: false}">Dirty</span> |
      <span ng-click="myFilter = orderBy: 'governance' : true">Goverance</span> |
      <span ng-click="myFilter = orderBy: 'environmental' : true ">Environmental</span> |
      <span ng-click="myFilter = orderBy: 'community' :true">Community</span> |
      <span ng-click="myFilter = null">All</span>
</div>

<div class="list-group-item col-md-8 pull-left" ng-repeat="site in list.links | filter:myFilter">
{{site.governance}}
{{site.environmental}}
{{site.community}}
</div>

一个示例对象是

{
      name: 'Facebook',
      url: 'www.facebook.com',
      green: false,
      governance: 45,
      environment: 69,
      community: 72,
      rank: 6
    }

【问题讨论】：

标签： html css angularjs angularjs-filter

【解决方案1】：

您的语法错误，您不能这样设置，filter 和 orderBy 是两个不同的过滤器，并采用 2 个不同的表达式。而是在点击时设置一个订单变量。

<div class ="col-md-8 pull-left">
     ...
      <span ng-click=" order='governance' ">Goverance</span> |
      <span ng-click=" order='environmental' ">Environmental</span> |
      <span ng-click=" order='community' ">Community</span> |
     ...
</div>

并使用变量：-

ng-repeat="site in list.links | filter:myFilter |orderBy:order"

可能还有排序：-

 <span ng-click=" order='governance'; sort=!sort ">Goverance</span>
....
<div .. ng-repeat="site in list.links | filter:myFilter |orderBy:order:sort"

Plnkr

【讨论】：

【解决方案2】：

正如 PSL 所说，您可以通过在单击时设置一个变量来做到这一点，即在 orderBy 子句中使用该变量。

Here is a working fiddle

<div>
  <span ng-click="myFilter = {green: true}">Clean</span>  |
  <span ng-click="myFilter = {green: false}">Dirty</span> |
  <span ng-click="myOrder = 'governance'">Goverance</span> |
  <span ng-click="myOrder = 'environmental' ">Environmental</span> |
  <span ng-click="myOrder = 'community'">Community</span> |
  <span ng-click="myFilter = null">All</span>
</div>

<div class="list-group-item col-md-8 pull-left" ng-repeat="site in list.links | filter:myFilter | orderBy:myOrder"></div>

【讨论】：