javascript - ng-click:predicate の使用中に ng-toggle と ng-class を使用してアイコンを変更する方法

Question

データモデル内のアイテムpredicateを簡単に並べ替えるために使用しています。現在、並べ替えが現在どの状態にあるかを示すために、上下の矢印アイコンを追加することに取り組んでいます。

実際の述語 orderBy の例: http://plnkr.co/edit/?p=preview

ただし、述語内でこれらの値を切り替える方法がわかりません:

<button type="button"
        class="btn btn-default"
        ng-click="predicate = 'added_epoch'; reverse=!reverse;">
        <div ng-class="recentAdded == 'up' ? 'iconUpBig' : 'iconDownBig'"></div>
        Recently added
</button>

コントローラ

$scope.recentAdded = 'up'

ここでは関数を使用していません。そのため、今それを切り替える方法を理解するのが少し難しいのです。

---

これにフックして変数を変更する方法はありrecentAddedますか?
どちらが変化しng-classます：

ng-click="predicate = 'added_epoch'; reverse=!reverse;"

次に、述語に基づいて、次を切り替えますng-class。

ng-class="recentAdded == 'up' ? 'iconUpBig' : 'iconDownBig'"

Answer 1

スコープ関数を追加するだけです。何が起こっているのかを理解するのが難しいほど多くのロジックをマークアップに入れたくはありません。

// could accept a predicate using a parameter
$scope.toggleSort = function() {
  // whatever other logic you need
  if ($scope.recentAdded === 'up') $scope.recentAdded = 'down';
  else $scope.recentAdded = 'up';
};