javascript - angularJS orderBy 的不同箭头

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">

当我的列未排序时，如何显示项目的不同 ng-class？

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

Answer 1

尝试将谓词添加到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>