更改顺序 Angular 点击图标

Question

我正在与 Angular 合作来完成这项工作。

我有一个 table，顶部有一些 header。 table header 里面有小的向下箭头。单击时，这些图标会根据单击 header 的列对 table 进行排序。这也是一个切换，因此如果您再次单击 header 列，它将在按升序或降序对列进行排序之间切换。

我想弄清楚如何在单击列 header 并重新选择该列（切换在上升和下降之间）。我该怎么做？

设置相当简单。这是一列 header:

<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

所以，我需要一种方法来在单击该列时 header 列的 ng-src 值中的两个图像之间切换，以便向上箭头切换为向下箭头，反之亦然。但是，显然在那一栏上应该切换方向。

我该怎么做？

Answer 1

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) 在控制器中设置箭头图像源：

$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';
  }
});

参见：http://codepen.io/naeramarth7/pen/GgbGLp

更改顺序 Angular 点击图标

Change OrderBy Angular Icons on Click

javascript

angularjs

angularjs-ng-repeat

angularjs-orderby

angularjs-ng-click