使用相同的函数 AngularJS 进行多表排序

multiple table sort using same function angularjs

本文关键字：排序 AngularJS 函数      更新时间：2023-09-26

我在Angularjs中是一个平庸的人，需要帮助。我有两个具有相同标题的表，表中的数据可能不同，也可能不同。我需要根据单击标题对数据进行排序。我对两个表使用相同的排序函数。问题是当我单击一个标题时，两个表上的数据都会被排序。我只需要对我单击其标题的表格进行排序。请帮忙。

这是代码。

<body ng-app="orderByExample">
  <div ng-controller="ExampleController">
    <pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre>
    <hr/>
    <button ng-click="predicate=''">Set to unsorted</button>
    <table class="friend">
      <tr>
        <th>
          <button ng-click="order('name')">Name</button>
          <span ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
        </th>
        <th>
          <button ng-click="order('phone')">Phone Number</button>
          <span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
        </th>
        <th>
          <button ng-click="order('age')">Age</button>
          <span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
        </th>
      </tr>
      <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
        <td>{{friend.age}}</td>
      </tr>
    </table>

      <table class="friend">
      <tr>
        <th>
          <button ng-click="order('name')">Name</button>
          <span ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
        </th>
        <th>
          <button ng-click="order('phone')">Phone Number</button>
          <span class="sortorder" ng-show="predicate === 'phone'" ng-class="{reverse:reverse}"></span>
        </th>
        <th>
          <button ng-click="order('age')">Age</button>
          <span class="sortorder" ng-show="predicate === 'age'" ng-class="{reverse:reverse}"></span>
        </th>
      </tr>
      <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
        <td>{{friend.age}}</td>
      </tr>
    </table>
  </div>
</body>

(function(angular) {
  'use strict';
angular.module('orderByExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.friends =
        [{name:'John', phone:'555-1212', age:10},
         {name:'Mary', phone:'555-9876', age:19},
         {name:'Mike', phone:'555-4321', age:21},
         {name:'Adam', phone:'555-5678', age:35},
         {name:'Julie', phone:'555-8765', age:29}];
    $scope.predicate = 'age';
    $scope.reverse = true;
    $scope.order = function(predicate) {
      $scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
      $scope.predicate = predicate;
    };
  }])
.factory("")
})(window.angular);

两个表对相同的变量进行排序，因此它们的显示自然是相同的。

我会对表标识符进行排序和谓词子级 - 我们将在这里使用 t1 和 t2，但请在您自己的代码中使用更可识别的东西。

$scope.t1 = { predicate: 'age', reverse: true};
$scope.t2 = { predicate: 'age', reverse: true};

现在，order 函数需要采用该标识符：

$scope.order = function(predicate, tableId) {
  $scope[tableId].reverse = ($scope[tableId].predicate === predicate) ? !$scope[tableId].reverse : false;
  $scope[tableId].predicate = predicate;
};

最后，排序函数和转发器需要使用它们的表 ID：

<table class="friend">
  <tr>
    <th>
      <button ng-click="order('name','t1')">Name</button>
      <span ng-show="t1.predicate === 'name'" ng-class="{reverse:t1.reverse}"></span>
    </th>
    <th>
      <button ng-click="order('phone','t1')">Phone Number</button>
      <span class="sortorder" ng-show="t1.predicate === 'phone'" ng-class="{reverse:t1.reverse}"></span>
    </th>
    <th>
      <button ng-click="order('age','t1')">Age</button>
      <span class="sortorder" ng-show="t1.predicate === 'age'" ng-class="{reverse:t1.reverse}"></span>
    </th>
  </tr>
  <tr ng-repeat="friend in friends | orderBy:t1.predicate:t1.reverse">
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.age}}</td>
  </tr>
</table>

表 2 的想法相同

如果您需要扩展，您可能希望使用某种中继器而不是我刚刚所做的。我把这个练习留给你。

相关文章：