如何使用ng-toggle和ng-class在使用ng-click：谓词时更改图标

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>

控制器

$scope.recentAdded = 'up'

我在这里没有使用某个功能，这就是为什么我现在看到如何切换它有点困难。

---

有没有办法挂钩并改变recentAdded var？
哪个会改变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';
};