11

我在使用orderByAngularJS 中的过滤器时遇到问题。这是我的设置：

<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正确更新。我显然错过了一些东西！

4

2 回答 2

12

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

你一定在其他地方有问题。

应用程序.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>
于 2012-12-25T09:29:57.313 回答
2

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

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

于 2016-07-22T23:17:59.187 回答