如何使用 AngularJS 在单击时对列进行反向排序 [英] How to reverse sort a column on click using AngularJS
本文介绍了如何使用 AngularJS 在单击时对列进行反向排序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个简单的方法来对表格列进行排序,但我无法找到一种在单击和返回时反转排序之间交替的方法.有没有人对此问题有任何解决方案?下面是一个小提琴,向您展示了我的意思.
<div ng-controller="控制器"><p>{{orderProperty}}</p><div class="col-md-10"><table class="table table-hover table-bordered"><头><tr><th>状态<a ng-click="orderProperty = 'a'">^</a></th><th>Ref<a ng-click="orderProperty = 'b'">^</a></th><th>Service<a ng-click="orderProperty = 'c'">^</a></th><th>域<a ng-click="orderProperty = 'd'">^</a></th><th>服务所有者<a ng-click="orderProperty = 'e'">^</a></th><th>Stage<a ng-click="orderProperty = 'f'">^</a></th></tr></thead><tr ng-repeat="x 在项目中 | orderBy:orderProperty"><td><b>{{x.a}}</b></td><td>{{x.b}}</td><td>{{x.c}}</td><td>{{x.d}}</td><td>{{x.e}}</td><td>{{x.f}}</td></tr></tbody>http://jsfiddle.net/ben1729/3nxykbhk/
解决方案 您可以通过在列名前加上-"来切换 orderProperty.用以下代码替换您的表头:
<tr><th>状态<a ng-click="setOrderProperty('a')">^</a></th><th>Ref<a ng-click="setOrderProperty('b')">^</a></th><th>Service<a ng-click="setOrderProperty('c')">^</a></th><th>域<a ng-click="setOrderProperty('d')">^</a></th><th>服务所有者<a ng-click="setOrderProperty('e')">^</a></th><th>Stage<a ng-click="setOrderProperty('f')">^</a></th></tr></thead>...并将此函数添加到您的范围:
$scope.setOrderProperty = function(propertyName) {if ($scope.orderProperty === propertyName) {$scope.orderProperty = '-' + propertyName;} else if ($scope.orderProperty === '-' + propertyName) {$scope.orderProperty = propertyName;} 别的 {$scope.orderProperty = propertyName;}}
http://jsfiddle.net/3nxykbhk/1/
I have a simple method of sorting the table column implemented but I can't figure out a way to alternate between reverse the sorting on click and back. Does anyone have any solutions to this issue? Below is a fiddle showing you what I mean.
<div ng-app="app">
<div ng-controller="controller">
<p>{{orderProperty}}</p>
<div class="col-md-10">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Status<a ng-click="orderProperty = 'a'">^</a></th>
<th>Ref<a ng-click="orderProperty = 'b'">^</a></th>
<th>Service<a ng-click="orderProperty = 'c'">^</a></th>
<th>Domain<a ng-click="orderProperty = 'd'">^</a></th>
<th>Service Owner<a ng-click="orderProperty = 'e'">^</a></th>
<th>Stage<a ng-click="orderProperty = 'f'">^</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in projects | orderBy:orderProperty">
<td><b>{{x.a}}</b></td>
<td>{{x.b}}</td>
<td>{{x.c}}</td>
<td>{{x.d}}</td>
<td>{{x.e}}</td>
<td>{{x.f}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
http://jsfiddle.net/ben1729/3nxykbhk/
解决方案 You could toggle the orderProperty by prefixing the column name with '-'.
Replace your table header with this code:
<thead>
<tr>
<th>Status<a ng-click="setOrderProperty('a')">^</a></th>
<th>Ref<a ng-click="setOrderProperty('b')">^</a></th>
<th>Service<a ng-click="setOrderProperty('c')">^</a></th>
<th>Domain<a ng-click="setOrderProperty('d')">^</a></th>
<th>Service Owner<a ng-click="setOrderProperty('e')">^</a></th>
<th>Stage<a ng-click="setOrderProperty('f')">^</a></th>
</tr>
</thead>
... and add this function to your scope:
$scope.setOrderProperty = function(propertyName) {
if ($scope.orderProperty === propertyName) {
$scope.orderProperty = '-' + propertyName;
} else if ($scope.orderProperty === '-' + propertyName) {
$scope.orderProperty = propertyName;
} else {
$scope.orderProperty = propertyName;
}
}
http://jsfiddle.net/3nxykbhk/1/
这篇关于如何使用 AngularJS 在单击时对列进行反向排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆