Question

在我的应用程序中，我有桌子，我正在排序

<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-repeat：

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

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

现在它出现在整列......

Answer 1

尝试将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>

angularJS为orderBy的不同箭头

1 个答案: