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'

我在这里没有使用函数，这就是为什么我现在很难看到如何切换它。

---

有没有办法挂钩并更改recentAddedvar？
这将反过来改变ng-class：

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

然后基于谓词，切换ng-class：

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

Answer 1

I would simply add a scope function. You don't want to put so much logic in your markup that it's hard to see what's going on.

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