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 - 属性设置为我想要orderBy使用的属性的名称：

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

这一切都运行正常，但如果我点击一个 person - div中的标题，所有 item - 表格{1}} - divs在该属性上排序。

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

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>

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

3 个答案: