Javascript AngularJS | orderBy 过滤器未动态更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14011971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS | orderBy filter not updated dynamically
提问by Teo.sk
I'm having trouble with the orderByfilter in AngularJS. Here's my setup:
我orderBy在 AngularJS中遇到过滤器问题。这是我的设置：
<li ng-repeat="item in listItems.data | orderBy:order">
<a ng-click="getRelated(item._id)">{{ item.title }}</a>
</li>
Part of the controller:
控制器的一部分：
$scope.order = 'year';
$scope.listItems = $http.post($scope.url, {'filterType': 'abc', 'letter': $scope.params.letter});
$scope.setOrder = function(order) {
$scope.order = order;
}
And finally the "switches" I would like to use for ordering the data
最后是我想用来订购数据的“开关”
<span class="sort--title">Sort by</span>
<a ng-class="{true:'selected', false:''}[order=='title']" href="" ng-click="setOrder('title')" class="sort--attribute">Title</a>
<a ng-class="{true:'selected', false:''}[order=='year']" href="" ng-click="setOrder('year')" class="sort--attribute">Year</a>
<a ng-class="{true:'selected', false:''}[order=='length']" href="" ng-click="setOrder('length')" class="sort--attribute">Length</a>
<a ng-class="{true:'selected', false:''}[order=='date_added']" href="" ng-click="setOrder('date_added')" class="sort--attribute">Date Added</a>
When I click the buttons, the list is not being re-ordered.
When I manually change the initial $scope.ordervalue, the list is ordered by the property. Also ng-classis updated correctly. I'm obviously missing out something!
当我单击按钮时，列表没有被重新排序。
当我手动更改初始$scope.order值时，列表按属性排序。也ng-class正确更新。我显然错过了一些东西！
回答by maxisam
I don't think your idea is wrong. It does work. Here is the working plunker.
我不认为你的想法是错误的。它确实有效。这是工作的plunker。
You must have something wrong somewhere else.
你肯定在别的地方出了什么问题。
app.js
应用程序.js
var app = angular.module('ngApp', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
'use strict';
$scope.friends = [
{name: 'John', phone: '555-1276'},
{name: 'Mary', phone: '800-BIG-MARY'},
{name: 'Mike', phone: '555-4321'},
{name: 'Adam', phone: '555-5678'},
{name: 'Julie', phone: '555-8765'}
];
$scope.setOrder = function (order) {
$scope.order = order;
};
}]);
main html
主 html
<ul class="nav nav-pills">
<li ng-class="{'active': order=='name'}"><a href="#" ng-click="setOrder('name')">name</a></li>
<li ng-class="{'active': order=='phone'}"><a href="#" ng-click="setOrder('phone')">phone</a></li>
</ul>
<ul>
<li data-ng-repeat="friend in friends|orderBy:order">
<span class="name">{{friend.name}}</span>
<span class="phone">{{friend.phone}}</span>
</li>
</ul>
回答by user2076106
I know its an old question but anyone else having the same issue might find this useful. I had the same issue. Clicks to anchor were reloading the page and hence, the order was being set to default whenever you click any table header. This also explains why not setting the order to a default globally fixed it for you.
我知道这是一个老问题，但其他有同样问题的人可能会发现这很有用。我遇到过同样的问题。单击以锚定会重新加载页面，因此，每当您单击任何表标题时，顺序都会设置为默认值。这也解释了为什么不将订单设置为默认为您全局修复它。
I replaced my anchor with a span element and it worked fine.
我用 span 元素替换了我的锚点，效果很好。
