Question

我们有一个ng-repeat，如下所示

 <table class="friend">
<tr>
  <th>Name</th>
  <th>Phone Number</th>
  <th>Age</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:(isSortRequired?'-name':'')">
  <td>{{friend.name}}</td>
  <td>{{friend.phone}}</td>
  <td>{{friend.age}}</td>
</tr>

仅当标记name为isSortRequired时才必须根据true进行排序。否则不需要排序。如果没有，这工作正常。记录的数量小于或等于10.如果记录数大于10且标志为false，则表格以加扰顺序显示记录。我们希望它按照与中的顺序显示的顺序显示对象。

为什么会出现这种情况？这是一个plunker来说明问题。

Answer 1

来自orderBy过滤器的角度文档

如果没有提供属性，那么数组元素本身用于比较排序的位置。

加扰效果是由角度为数组中的每个对象添加$$hashKey属性引起的。 $$hasKey不能保证与初始数组的顺序相同，从而使它们看起来是随机的。＃/ p>

因此，您可以预先订购数组，也可以使用仅在需要订购时应用orderBy过滤器的自定义过滤器。

自定义过滤器可能看起来像这样

.filter('filter', ['$filter', function($filter)
{
  var orderBy = $filter('orderBy');
  return function(input, property, use)
  {
    return use ? oderBy(input, property) : input;
  };
}

Answer 2

您可以通过

在订单中使用reverse选项来解决此问题

我已经更改了您的代码

Html更改

 <table class="friend">
    <tr>
      <th> 
      **<a href="" ng-click="predicate = 'name'; reverse=!reverse">Name</a>**</th>// changes here
      <th>Phone Number</th>
      <th>Age</th>
    </tr>
    **<tr ng-repeat="friend in friends | orderBy:predicate:reverse">**// changes here
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>

我在控制器中添加了一个范围对象，用于名称排序

$scope.predicate = '-name';

脚本更改

<script>
  angular.module('orderByExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.isSortRequired = true;
      $scope.friends =
          [{name:'john', phone:'555-1212', age:10},
           {name:'mary', phone:'555-9876', age:19},
           {name:'mike', phone:'555-4321', age:21},
           {name:'julie', phone:'555-8765', age:29},{name:'A', phone:'555-1212', age:10},
           {name:'B', phone:'555-9876', age:19},
           {name:'C', phone:'555-4321', age:21},
           {name:'D', phone:'555-5678', age:35},
           {name:'E', phone:'555-8765', age:29},{name:'F', phone:'555-1212', age:10},
           {name:'G', phone:'555-9876', age:19},
           {name:'H', phone:'555-4321', age:21},
           {name:'I', phone:'555-5678', age:35},
           {name:'J', phone:'555-8765', age:29}];
    }]);

    $scope.predicate = '-name';// ans also some change here
</script>

我已更新您的plunker Demo

plunker 仅帮助对名称列进行排序，如果要对所有列进行排序，则需要对所有列执行相同的操作。

angularJS：ng-repeat orderby在有条件使用时给出加扰顺序

2 个答案:

Html更改

脚本更改