如何在使用 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>

控制器

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