我在 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};
现在订单函数需要采用该标识符:
$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 的想法相同
如果您需要扩大规模，您可能会想要使用某种中继器，而不是我刚才所做的。我会把这个练习留给你。
关于javascript - 使用相同的函数 angularjs 进行多表排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35116993/