我有一个简单的方法来对表列进行排序,但我无法找到一种方法来在单击和返回时反向排序之间进行交替。有人对这个问题有任何解决方案吗?下面是一个小提琴,向您展示我的意思。
<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/
您可以通过在列名称前添加“-”前缀来切换 orderProperty。
将表头替换为以下代码:
<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>
...并将此函数添加到您的范围中:
$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/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)