Javascript 单击+；表格标题颜色变化

基本上，我使用V形符号

字形图标V形符号向下

在一组表格标题上设置排序按钮。单击V形图标时，它将按降序对表格进行排序，第二次单击时，它将按升序排序，依此类推。如果单击其他列的V形，它将首先按降序排序，然后应用上述方法

我希望这样，当你点击一个V形时，它在

字形图标V形向下

和

字形图标V形向上

之间交替。请注意，需要有某种逻辑才能做到这一点，因此单击另一列不会在第一次单击时将V形符号更改为

字形图标V形符号向上

，因为这将是第一次按降序排序

此外，我正试图使它这样的表标题与被点击的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>

你需要的是

在您的作用域上维护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')" ...

Header1
Header2我认为ng类指令将解决您的问题，但是您如何将其插入语句中，保留已有的功能？不幸的是，这并不能很好地工作。CSS不再是一个问题，但该功能不适用于在V形之间切换活动状态。
<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')" ...