问题 AngularJS | orderBy过滤器未动态更新

我遇到麻烦了 orderBy 在AngularJS中过滤。这是我的设置：

<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;
}

最后我想使用“开关”来订购数据

    <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 值，该列表由酒店订购。也 ng-class 已正确更新。我显然错过了一些东西！

9421

2017-12-23 15:02

起源

你能解决问题吗？我看不到你的post函数返回的数据是什么样的。 - Mathew Berg

在这种情况下，我不太确定数据是否相关。我的问题基本上是，如何制作 ng-repeat 数据强制在orderBy参数更改时重新加载。或者这与数据有什么关系？ - Teo.sk

对我来说似乎是对的。我想你应该尝试设置一个jsFiddle。我想也许其他一些事情都会出错。 - maxisam

答案:

我不认为你的想法是错的。它确实有效。这是工作 plunker。

你必须在其他地方出错。

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>

2017-12-25 09:29

我发现了导致这个问题的原因。我应该是什么样的默认设置 order var在控制器的开头： $scope.order = 'year'; 我将你的代码与我的代码进行了比较，这是唯一的区别，删除它有所帮助。我不明白，为什么这样设置一个变量导致效果......无论如何我会接受你的答案，它帮助我找到了这个bug。 - Teo.sk

好吧，我认为不重要。您也可以尝试在我的代码中执行此操作。你可以试试 $scope.order = 'name'; 但谢谢你接受我的回答。我很高兴能帮到你。 - maxisam

它确实很重要，我又遇到了它，并问了另一个问题： stackoverflow.com/questions/14075741/... 这种情况也是如此 $scope.order 我不知道目前为什么会这样:) - Teo.sk

你在我的plunker尝试吗？ - maxisam

是的，也是一个单独的小提琴，它的作用..这就是为什么我很困惑..我在我的链接问题中更深入地描述了问题..我已经得到了一个答案，但我现在太累了，会试试明天，我会告诉你更新。 - Teo.sk

我知道这是一个老问题，但是其他任何有同样问题的人都会觉得这很有用。我遇到过同样的问题。 Clicks to anchor正在重新加载页面，因此，只要您单击任何表格标题，订单就会被设置为默认值。这也解释了为什么不将订单设置为默认值全局修复它。

我用span元素替换了我的锚，它工作得很好。

2017-07-22 23:17

这不能解决问题。一旦你有足够的声誉你将能够评论任何帖子;代替，提供答案，不需要提问者澄清。 - 来自评论 - StepUp

我相信这为提问者的困惑提供了一个确切的解释。有一个假设我已经让提问者的页面也在重新加载，但它是一个安全的假设，因为点击锚点应该重新加载页面。 - user2076106

问题 AngularJS | orderBy过滤器未动态更新

答案:

热门问题