关于 angularjs:仅对嵌套的 ng 重复中的某些数组进行排序

Sorting only certain arrays in nested ngRepeat

我目前有一个嵌套的 ngRepeat,其中内部循环迭代来自其父级的项目集合。摘录:

1
2
3
4
5
6
7
8
9
10
11
12
 (Irrelevant code here.)

  <table>
    <tr>
      <th ng-click="setItemOrder('name')">Item name</th>
      <th ng-click="setItemOrder('number')">Item number</th>
    </tr>
    <tr ng-repeat="item in person.items | orderBy:itemOrder">
      <td>{{item.name}}
      <td>{{item.number}}
    </tr>
  </table>

通过单击表标题,我将控制器中的 itemOrder 属性设置为我希望 orderBy 使用的属性的名称:

1
2
3
$scope.setItemOrder = function(order){
  $scope.itemOrder = order;
}

这一切正常,除了如果我单击一个 person-div 中的标题,所有 person-div 中的 item-tables 将根据该属性进行排序。

有没有办法让 ngRepeat 只将 orderBy 应用于符合特定条件的条目 - 例如某个索引?或者我应该使用不同的方法?


尝试将属性设置为相应的 person 实例,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
angular.module('test', []).controller('testController', function($scope) {

  $scope.persons = [{
    items: [{
      name: 'test',
      number: 2
    }, {
      name: 'test1',
      number: 1
    }]
  }, {
    items: [{
      name: 'test3',
      number: 5
    }, {
      name: 'test4',
      number: 4
    }]
  }];

  $scope.setItemOrder = function(person, order) {
    person.itemOrder = order;
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
<form ng-app="test" ng-controller="testController">
 
    <table>
      <tr>
        <th ng-click="setItemOrder(person,'name')">Item name</th>
        <th ng-click="setItemOrder(person,'number')">Item number</th>
      </tr>
      <tr ng-repeat="item in person.items | orderBy:person.itemOrder">
        <td>{{item.name}}
          <td>{{item.number}}
      </tr>
    </table>


您可以为每个人添加一个排序变量,并使用 person 对象扩展 setItemOrder。然后你可以调用:

1
setItemOrder(person, 'name');

然后在 ngRepeat:

中使用它

1
orderBy:person.itemOrder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
angular.module('test', []).controller('testController', function($scope) {
 $scope.ordersort=true;
  $scope.orderfield='number';
  $scope.persons = {
   "items": [{
     "name": 'test',
     "number": 2
    }, {
     "name": 'test1',
     "number": 1
    }],
 
   "item1": [{
     "name": 'test3',
     "number": 5
    }, {
     "name": 'test4',
     "number": 4
    }]
  };

  $scope.setItemOrder = function(person, order) {
     $scope.orderfield=order;
    person.itemOrder = order;
    $scope.ordersort= !$scope.ordersort;
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
<form ng-app="test" ng-controller="testController">
 
 
   
    <table>
      <tr>
        <th ng-click="setItemOrder(person,'name')">Item name</th>
        <th ng-click="setItemOrder(person,'number')">Item number</th>
      </tr>
      <tr ng-repeat="item in person | orderBy:orderfield:ordersort">
        <td>{{item.name}}
          <td>{{item.number}}
      </tr>
    </table>

我已经修改了您的示例。在这个例子中,表格排序工作得很好。但是当我单击该表标题时,它不会对特定表进行排序。无论如何要按特定表对列进行排序?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
angular.module('test', []).controller('testController', function($scope) {

  $scope.persons = [{
    items: [{
      name: 'test',
      number: 2
    }, {
      name: 'test1',
      number: 1
    }]
  }, {
    items: [{
      name: 'test3',
      number: 5
    }, {
      name: 'test4',
      number: 4
    }]
  }];

  $scope.setItemOrder = function(person, order) {
    person.itemOrder = order;
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
<form ng-app="test" ng-controller="testController">
 
    <table>
      <tr>
        <th ng-click="setItemOrder(person,'name')">Item name</th>
        <th ng-click="setItemOrder(person,'number')">Item number</th>
      </tr>
      <tr ng-repeat="item in person.items | orderBy:person.itemOrder">
        <td>{{item.name}}
          <td>{{item.number}}
      </tr>
    </table>