AngularJS不同的箭头用于orderBy

angularJS different arrows for orderBy

本文关键字：用于 orderBy AngularJS      更新时间：2023-09-26

在我的应用程序中，我有表格，我正在排序

<th data-ng-click="predicate = 'FirstName'; reverse=!reverse">Name <i ng-class="{'arrow-down' : reverse, 'arrow-up' : !reverse}"></i></th>
<th data-ng-click="predicate = 'LastName'; reverse=!reverse">Last Name <i ng-class="{'arrow-down' : reverse, 'arrow-up' : !reverse}"></i</th>

和 ng 重复：

<tr data-ng-repeat="user in users | orderBy:predicate:reverse" data-id="{{user.Id}}" class="table-row">

当我不对列进行排序时，如何为项目显示不同的 ng 类？

现在它出现在整个列中...

尝试将predicate添加到ng-class条件：

<th data-ng-click="predicate = 'FirstName'; reverse=!reverse">Name
    <i ng-class="{'arrow-down' : reverse && predicate==='FirstName', 'arrow-up' : !reverse && predicate==='FirstName'}"></i></th>

当表未按此列排序时，使用默认箭头显示非常简单：

<th data-ng-click="predicate = 'FirstName'; reverse=!reverse">Name
    <i ng-class="{
        'arrow-down' : reverse && predicate==='FirstName',
        'arrow-up' : !reverse && predicate==='FirstName',
        'arrow-not-sorted': predicate!=='FirstName'
    }"></i></th>
相关文章：