Question

我正在与Angular一起工作。

我的桌子顶部有一些标题。表格标题内有很少的向下箭头。单击时，这些图标会根据单击其标题的列对表进行排序。它也是一个切换，因此如果再次单击列标题，它将在按升序或降序对列进行排序之间切换。

我想弄清楚当点击列标题并使用列（在升序和降序之间切换）时，如何使箭头在两个不同的图像之间切换（一个箭头图像朝上，另一个朝下）。我该怎么做？

设置非常简单。这是一个列标题：

<a href="#" ng-click="orderByColumn='duration'; reverseSort = !reverseSort">
   Duration<img ng-src="{{arrowDirection}}" alt="Filter Workshops by Duration of Workshop"/>
</a>

这是我的桌子本身：

<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值中切换两个图像，以便向上箭头切换到向下箭头，反之亦然。但是，很明显，一列应该切换方向。

我该怎么做？

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

单击时更改OrderBy Angular图标

1 个答案: