0

これを行うためにAngularと協力しています。

上部にいくつかのヘッダーがあるテーブルがあります。テーブル ヘッダー内に小さな下向き矢印があります。これらのアイコンをクリックすると、ヘッダーがクリックされた列に基づいてテーブルが並べ替えられます。これもトグルなので、列ヘッダーをもう一度クリックすると、列の昇順または降順での並べ替えが切り替わります。

列ヘッダーをクリックして列を並べ替える (昇順と降順の切り替え) ときに、矢印を 2 つの異なる画像 (一方は上向き、もう一方は下向き) の間で切り替える方法を見つけようとしています。どうすればいいですか？

セットアップはかなり簡単です。列ヘッダーは次のとおりです。

<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>

また、すべてを示す codepen があります: http://codepen.io/trueScript/pen/XJLEVQ

そのため、列がクリックされたときに列ヘッダーの ng-src 値の 2 つの画像を切り替える方法が必要です。これにより、上向き矢印が下向き矢印に切り替わり、その逆も同様になります。ただし、明らかにその1つの列で方向を切り替える必要があります。

どうすればいいですか？

4

1 に答える 1

1

ng-if1)列でソートされている場合は、矢印のみを表示するa を追加します。

<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

于 2015-04-11T12:23:25.303 に答える