AngularJS | orderBy filter pas mis à jour dynamiquement

Je vais avoir des ennuis avec la orderBy filtre en AngularJS. Voici ma configuration:

<li ng-repeat="item in listItems.data | orderBy:order">
    <a ng-click="getRelated(item._id)">{{ item.title }}</a>
</li>

Partie du contrôleur:

$scope.order = 'year';

$scope.listItems = $http.post($scope.url, {'filterType': 'abc', 'letter': $scope.params.letter});

$scope.setOrder = function(order) {
    $scope.order = order;
}

Et enfin les "interrupteurs" je voudrais l'utiliser pour ordonner les données

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

Quand je clique sur les boutons, la liste n'est pas commandé.
Quand j'ai changer manuellement la première $scope.order valeur, la liste est ordonnée par la propriété. Aussi ng-class est mis à jour correctement. Je suis évidemment raté quelque chose!

source d'informationauteur Teo.sk

  1. 11

    Je ne pense pas que votre idée est fausse. Il ne fonctionne pas. Ici, c'est le travail plunker.

    Vous devez avoir quelque chose de mal, quelque part d'autre.

    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 principal

    <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>
  2. 2

    Je sais que c'est une vieille question, mais quelqu'un d'autre ayant la même question pourrait trouver cela utile.
    J'ai eu le même problème. Clique pour ancre a été le rechargement de la page, et donc, l'ordre a été établi par défaut à chaque fois que vous cliquez sur un en-tête de table. Cela explique aussi pourquoi ne pas fixer l'ordre par défaut à l'échelle mondiale, il fixe pour vous.

    J'ai remplacé mon ancre avec un élément span et il a bien fonctionné.