如何使用AngularJS orderBy

Question

我认为我的语法不正确？我可以在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 
    } 

Answer 1

你有语法错误，不能设置这种方式，筛选和排序依据是两个不同的过滤器，并采取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

Answer 2

由于PSL说，你能做到这一点通过点击设置变量，在th中使用该变量e 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>