如何使用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>