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

标签 angularjs sorting glyphicons ng-class

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

我正在尝试将 ng-class 实现到所有可排序 header 中,以便能够将 glyphicon-chevron-down 更改为 glyphicon-chevron-up 当它按升序排列时,反之亦然。

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

下面是一个 plnkr,其中包含相关表格的示例。如果有人可以帮助我进行此更改,我将不胜感激。

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

最佳答案

您可以验证 orderProperty 并在 ng-class 条件中使用它来设置 glyphicon-chevron-down glyphicon-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>

可以在此处找到示例:http://plnkr.co/edit/3h4O7vQr8y4js4hj1otv

关于angularjs - 使用 ng-class 更改对表进行排序的字形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32716912/

相关文章:

javascript - 更改日期调用一次功能

javascript - Angularjs 指令 $compile 导致 ng-click 触发两次

javascript - 如何在angularjs中使用表达式绑定(bind)属性名称?

wordpress - 如何对多个wordpress自定义字段值进行排序?

css - Bootstrap 图标与输入组对齐

javascript - 从数组结果中获取两个字段

php - 按贝叶斯评级排序数据库结果

css - Bootstrap 3 在输入字段中放置图标

python - 如何判断一个字形是否可以显示?

python - sorted(key=lambda : . ..) 后面的语法