使用ng-class更改对表格进行排序的字形

时间:2015-09-22 12:29:50

标签: angularjs sorting glyphicons ng-class

我一直无法让ng-class按预期工作。我有一个表,可以通过点击glyphicon-chevron-down按降序和升序排序。然而,这就是问题所在。

我正在尝试将ng-class实施到所有可排序的标头中,以便在glyphicon-chevron-down升序时更改为glyphicon-chevron-up,反之亦然。

问题的第二部分是它的变化方式。当您单击标题时,它将首先按降序排序,然后下一次单击应使用glyphicon-chevron-up以升序显示,除非它是默认的排序标题。在这种情况下,它应该从降序(默认状态)切换到升序。

下面是一个plnkr,其中包含相关表格的示例。如果有人可以帮助我做出这些改变,我们将不胜感激。

http://plnkr.co/edit/LrnPj1nx4sdQD8F9ctKB?p=preview

1 个答案:

答案 0 :(得分:2)

您可以在orderProperty上进行验证并在ng-class条件中使用该设置glyphicon-chevron-downglyphicon-chevron-up

<th>D<span id="tbl3" ng-click="setOrderProperty('d')" class="glyphicon pull-right" ng-class="{ 'glyphicon-chevron-down': orderProperty != 'd', 'glyphicon-chevron-up' : orderProperty == 'd' }"></span></th>

可在此处找到一个示例:Official doc