AngularJS |排序依据的过滤掉不动态更新 [英] AngularJS | orderBy filter not updated dynamically
本文介绍了AngularJS |排序依据的过滤掉不动态更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在用AngularJS的排序依据
过滤器的麻烦。这里是我的设置:
I'm having trouble with the orderBy
filter in AngularJS. Here's my setup:
<li ng-repeat="item in listItems.data | orderBy:order">
<a ng-click="getRelated(item._id)">{{ item.title }}</a>
</li>
控制器的部分:
$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>
当我点击按钮,列表不被重新排序。
当我手动更改初始 $ scope.order
值,列表是由物业订购。此外纳克级
正确更新。我显然缺少了一些东西!
When I click the buttons, the list is not being re-ordered.
When I manually change the initial $scope.order
value, the list is ordered by the property. Also ng-class
is updated correctly. I'm obviously missing out something!
推荐答案
我不认为你的想法是错误的。它的工作。这里是工作 plunker 。
I don't think your idea is wrong. It does work. Here is the working plunker.
您必须有什么不对别处。
You must have something wrong somewhere else.
app.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;
};
}]);
主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>
这篇关于AngularJS |排序依据的过滤掉不动态更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文