gpt4 book ai didi

javascript - 使用相同功能angularjs的多表排序

转载 作者:行者123 更新时间:2023-11-29 21:34:54 41 4
gpt4 key购买 nike

我在 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/

41 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com