仅对嵌套 ngRepeat 中的某些数组进行排序

Question

我目前有一个嵌套的 ngRepeat，其中内部循环迭代其父项的集合。摘录：

<div ng-repeat="person in persons">

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

</div>

通过单击表头，我将控制器中的itemOrder-property 设置为我希望orderBy 使用的属性的名称：

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

这一切都很好，除了如果我单击 one person-div 中的标题，all person-divs 中的 item-tables对该属性进行排序。

有没有办法让 ngRepeat 仅将 orderBy 应用于符合特定条件的条目 - 例如特定索引？还是我应该使用不同的方法？

Answer 1

尝试将属性设置为相应的人员实例，如下所示：

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;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="test" ng-controller="testController">
  <div ng-repeat="person in persons">
    <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>

  </div>

Answer 2

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

setItemOrder(person, 'name');

然后在 ngRepeat 中使用它：

orderBy:person.itemOrder

Answer 3

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;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="test" ng-controller="testController">
 
  <div ng-repeat="person in persons">
    
    <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>

  </div>

我修改了你的例子。在此示例中，表格排序运行良好。但是当我单击该表格标题时，它没有对特定表格进行排序。无论如何要按特定表对列进行排序？

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;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="test" ng-controller="testController">
  <div ng-repeat="person in persons">
    <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>

  </div>