單擊時更改字形+表格標題顏色更改

Question

本質上，我使用人字形glyphicon-chevron-down來設置表頭上的排序按鈕。 當您單擊人字形時，它將以降序對表格進行排序；當您再次單擊它時，將按升序對表格進行排序，依此類推。 如果單擊其他列的人字形，它將首先按降序排序，然后適用

我希望做到這一點，所以當您單擊人字形時，它會在glyphicon-chevron-down和glyphicon-chevron-up之間glyphicon-chevron-down 。 請注意，必須有某種邏輯才能使之單擊，因此單擊另一列將不會在第一次單擊時將glyphicon-chevron-up更改為glyphicon-chevron-up ，因為它將首先按照降序排序。

另外，我正在嘗試使其具有被單擊的人字形的表標題更改顏色，並在單擊其他人字形時返回到先前的顏色。

對於任何一個問題的任何幫助將不勝感激。 這是代碼示例供參考。

HTML

<th>Header1<span ng-click="setOrderProperty('c.name')" class="glyphicon glyphiconsort glyphicon-chevron-down pull-right"></span></th>

<th>Header2<span ng-click="setOrderProperty('c.name2')" class="glyphicon glyphiconsort glyphicon-chevron-down pull-right"></span></th>

<th>Header3<span ng-click="setOrderProperty('c.name3')" class="glyphicon glyphiconsort glyphicon-chevron-down pull-right"></span></th>

JavaScript

$scope.setOrderProperty = function(propertyName) {
        if ($scope.orderProperty === propertyName) {
            $scope.orderProperty = '-' + propertyName;
        } else if ($scope.orderProperty === '-' + propertyName) {
            $scope.orderProperty = propertyName;
        } else {
            $scope.orderProperty = propertyName;
        }
    };

Answer 1

您需要的是ng-class 。

在您的范圍內維護一個status屬性。 單擊標題將設置此屬性：

$scope.activeColumn = '';
$scope.ascending = '';
$scope.setOrderProperty = function (activeColumn) {
    // If clicking on the current column, reverse ascending/descending
    if ($scope.activeColumn === activeColumn) {
        $scope.ascending = !$scope.ascending;
    }
    $scope.activeColumn = activeColumn;
};

對於您的HTML：

<th>Header1<span ng-click="setOrderProperty(c.name)" ng-class="{ 
        'active': activeColumn === c.name, 
        'glyphicon-chevron-down': ascending === false, 
        'glyphicon-chevron-up': ascending === true
    }" class="glyphicon glyphiconsort pull-right"></span></th>

<th>Header2<span ng-click="setOrderProperty('c.name2')" ...

<th>Header3<span ng-click="setOrderProperty('c.name3')" ...

在CSS中，為選定的列設置active的類樣式以進行排序。