Angularjs orderBy 无法正常工作

Question

我已经修改了 angularjs 文档中给出的示例。我在该示例中为所有年龄字段设置了零，当我单击年龄排序按钮时，列表正在排序（不知道列表基于哪个参数进行排序），尽管所有年龄字段都为零并且不应该是排序。

Plunker：https://plnkr.co/edit/85dmPRFu6IPhHnTkXqgU?p=preview

查看：

<div ng-controller="ExampleController">
      <pre>Sort by = {{propertyName}}; reverse = {{reverse}}</pre>
      <hr />
      <button ng-click="propertyName = null; reverse = false">Set to unsorted</button>
      <hr />
      <table class="friends">
        <tbody>
          <tr>
            <th>
              <button ng-click="sortBy('name')">Name</button>
              <span class="sortorder" ng-show="propertyName === 'name'" ng-class="{reverse: reverse}"></span>
            </th>
            <th>
              <button ng-click="sortBy('phone')">Phone Number</button>
              <span class="sortorder" ng-show="propertyName === 'phone'" ng-class="{reverse: reverse}"></span>
            </th>
            <th>
              <button ng-click="sortBy('age')">Age</button>
              <span class="sortorder" ng-show="propertyName === 'age'" ng-class="{reverse: reverse}"></span>
            </th>
          </tr>
          <tr ng-repeat="friend in friends | orderBy:propertyName:reverse">
            <td>{{friend.name}}</td>
            <td>{{friend.phone}}</td>
            <td>{{friend.age}}</td>
          </tr>
        </tbody>
      </table>
    </div>

控制器：

.controller('ExampleController', ['$scope', function($scope) {
    var friends = [
      {name: 'John',   phone: '555-1212',  age: 0},
      {name: 'Mary',   phone: '555-9876',  age: 0},
      {name: 'Mike',   phone: '555-4321',  age: 0},
      {name: 'Adam',   phone: '555-5678',  age: 0},
      {name: 'Julie',  phone: '555-8765',  age: 0}
    ];

    $scope.propertyName = 'age';
    $scope.reverse = true;
    $scope.friends = friends;

    $scope.sortBy = function(propertyName) {
      $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
      $scope.propertyName = propertyName;
    };
  }

Answer 1

在后台 angularjs 使用 this function:

function doComparison(v1, v2) {
  for (var i = 0, ii = predicates.length; i < ii; i++) {
    var result = compare(v1.predicateValues[i], v2.predicateValues[i]);
    if (result) {
      return result * predicates[i].descending * descending;
    }
  }

  return compare(v1.tieBreaker, v2.tieBreaker) * descending;
}

由于您的 v1 和 v2 始终相同，compare(v1.tieBreaker, v2.tieBreaker) 将始终返回相同的值 -1（因为 v1.value 等于 v2.value 使用了 tieBreaker），而 descending变量将是-1 或1，具体取决于排序顺序。这就是角度变化顺序的原因。

如果你不想在这个过滤器中使用sortOrder：

friend in friends | orderBy:propertyName:reverse

或没有改变是每次点击这里：

$scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;

顺序不会改变。

Answer 2

输出背后的实际原因是，当您点击年龄过滤器时，数据将不再排序。它以控制器中声明的确切顺序显示您的$scope.friends。

Answer 3

正如@Maximus 所建议的，我在将$scope.reverse 的值切换为真或假之前添加了一个检查。

$scope.sortBy = function(propertyName) {

      $scope.propertyName = propertyName;
     // check all the values of propertyName i.e. age in the array
     for (var i=0; i < friends.length; i++) {
        // toggle $scope.reverse only when the values are not same (zero in my case)
        if (friends[i].age !== 0) {
            $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
        }
    }
    };

https://plnkr.co/edit/vMira2iF94yuOqJw3gA7?p=preview