javascript - 如何在使用 ng-click :predicate 时使用 ng-toggle 和 ng-class 更改图标

Question

我正在使用 predicate 轻松地 sort items在我的数据模型中。现在，我正在努力添加向上和向下箭头图标以显示排序当前所处的状态。

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

Controller

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