Question

基本上我使用V形符号glyphicon-chevron-down来设置表标题上的排序按钮。当你单击一个V形符号时，它将按降序对表格进行排序，当你再次点击它时，它会按升序排序，依此类推。如果您单击其他列的V形，它将首先按降序排序，然后应用

我希望当你点击一个人字形时，它会在glyphicon-chevron-down和glyphicon-chevron-up之间交替显示。请注意，需要有某种逻辑来实现它所以点击另一列不会在第一次点击时将V形符号更改为glyphicon-chevron-up，因为它将首先按降序排序。

此外，我正在努力使其与点击的V形符号表格标题改变颜色，并在点击不同的V形符号时返回到上一个颜色。

对于任何一个问题的任何帮助将不胜感激。以下是供参考的代码示例。

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。

维护范围内的状态属性。单击标题将设置此属性：

$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的样式以进行排序。

在点击+表格标题颜色更改

1 个答案: