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

javascript - 在点击+表格标题颜色更改,第1张

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

我希望当你点击一个人字形时,它会在glyphicon-chevron-downglyphicon-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;
        }
    };

最佳答案:

1 个答案:

答案 0 :(得分: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的样式以进行排序。

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复