Question

我正在编写angular.js应用程序，我需要在JSON数组上执行filter-orderBy。如果我通过创建一个不带参数的方法并使用$ scope引用显式数组来做到这一点，一切正常：

...
<th class="ui th" ng-click="sortArray('name')">Name</th>
...

sortArray = (sortParam) ->
  $scope.myArray = $filter('orderBy')($scope.myArray, sortParam)

但是如果我尝试通过将数组作为方法参数进行泛化，就像这样：

...
<th class="ui th" ng-click="sortArray(myArray,'name')">Name</th>
...

sortArray = (arr,sortParam) ->
  arr = $filter('orderBy')(arr, sortParam)

似乎数组在后端排序，但用于ng-repeat的表在视觉上保持不变。例如：我有这个数组：

{ arr : 
 [
  { 'id' : 1 },
  { 'id' : 2 },
  { 'id' : 3 }
 ]
}

现在，在第一种情况下，如果我按照第一种情况排序，渲染会更改以匹配排序的数组。但在第二种情况下，渲染不会改变（它仍将显示为1 - 2 - 3），但如果我打印出第一个单元格的id（呈现'1'），它将会显示'3'（排序后数组的顶部。希望它有意义。

我需要它的原因是打开一个模式，点击行的内容。为此，我在ng-repeat标签中添加了ng-click，索引为：

<tr ng-repeat="row in arr | filter:filter" ng-click="loadModal($index)">

这样，即使数组被重新排序，loadModal（$ index）的值也不会改变，in将以正确的行打开。

所以，经过这个漫长的解释 - 我如何编写一个可以采用和排序不同数组（代码重用）的泛型方法，但也会影响渲染？或者，这是正确的方式吗？我没有数组条目的ID，没有什么可以依旧，以识别行。

Answer 1

我认为你不需要写一个generic method！

在您的视图中使用orderBy过滤器和ng-repeat，如

<tr ng-repeat="friend in friends | orderBy:predicate:reverse">

在ng-click上设置predicate值，如

<th class="ui th" ng-click="predicate = 'name'; reverse= !reverse">Name</th>

当您点击Name时，predicate会将值传递给orderBy过滤器，并且您的视图会自动调整最新更改，reverse= !reverse用于切换您的排序。

检查angularjs Demo

如何在angularjs中编写泛型排序

1 个答案: