我正在与 Angular 合作来完成此任务。
我有一个表格,顶部有一些标题。表格标题内有一些向下的小箭头。单击时,这些图标会根据单击标题的列对表进行排序。它也是一个切换开关,因此如果您再次单击列标题,它将在按升序或降序对列进行排序之间切换。
我试图弄清楚当单击列标题并重新排列列(在升序和降序之间切换)时,如何使箭头在两个不同图像(一个箭头图像朝上,另一个朝下)之间切换。我该怎么做?
设置相当简单。这是列标题:
<a href="#" ng-click="orderByColumn='duration'; reverseSort = !reverseSort">
Duration<img ng-src="{{arrowDirection}}" alt="Filter Workshops by Duration of Workshop"/>
</a>
这是我的 table 本身:
<div data-ng-repeat="workshop in workshops | orderBy:orderByColumn:reverseSort">
<div data-ng-bind="workshop.WorkshopCode"></div>
<div data-ng-bind="workshop.Title"></div>
<div data-ng-bind="workshop.StartDate"></div>
<div data-ng-bind="workshop.duration"></div>
<div data-ng-bind="workshop.Modality"></div>
</div>
此外,这里有一个代码笔演示了整个事情:http://codepen.io/trueScript/pen/XJLEVQ
因此,我需要一种方法在单击该列时在列标题的 ng-src 值中的两个图像之间进行切换,以便向上箭头切换为向下箭头,反之亦然。然而,显然在那一列上应该改变方向。
我该怎么做?
最佳答案
1) 添加 ng-if
以仅显示箭头(如果按列排序):
<a href="#" ng-click="orderByColumn='duration'; reverseSort = !reverseSort">
Duration<img ng-if="orderByColumn==='duration'" ng-src="{{arrowSrc}}" alt="Filter Workshops by Duration of Workshop"/>
</a>
2)在 Controller 中设置箭头图像源:
$scope.$watch('reverseSort', function (value) {
if (value) {
$scope.arrowSrc = 'http://upload.wikimedia.org/wikipedia/commons/3/30/Gtk-go-down.svg';
} else {
$scope.arrowSrc = 'http://upload.wikimedia.org/wikipedia/commons/8/88/Gtk-go-up.svg';
}
});
关于javascript - 单击时按 Angular 图标更改顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29572447/