如何使用ng-toggle和ng-class在使用ng-click時更改圖標：謂詞

Question

我在我的數據模型中使用predicate來輕鬆地sort items。現在我工作在一個向上和向下箭頭圖標將顯示其狀態的排序是目前

謂詞排序依據的例子在行動：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變種？
這將inturn改變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'; 
};