在我的 Controller 中,有 2 个变量跟踪表的排序状态:
/* sorting */
$scope.sortField = 'code';
$scope.sortDir = 'asc';
在CSS中有3个不同的类代表排序状态:
table.table thead .sorting { ...} /*sorting disabled*/
table.table thead .sorting_asc { ... } /*sorting asc*/
table.table thead .sorting_desc { ... } /*sorting desc*/
我想使用 ng 类表达式来动态更改表格列上的排序图标,这是 html:
<thead>
<tr>
<th ng-class="" ng-click="sortBy('code')">Summit code</th>
<th ng-class="" ng-click="sortBy('name')">Name</th>
<th ng-class="" ng-click="sortBy('height')">Height</th>
<th ng-class="" ng-click="sortBy('points')">Points</th>
</tr>
</thead>
这是一个可能的实现(不是很聪明)
<thead>
<tr>
<th ng-class="{sorting_asc: (sortField == 'code' && sortDir == 'asc'), sorting_desc: (sortField == 'code' && sortDir == 'desc'), sorting: (sortField != 'code')}" ng-click="sortBy('code')">Summit code</th>
<th ng-class="{sorting_asc: (sortField == 'name' && sortDir == 'asc'), sorting_desc: (sortField == 'name' && sortDir == 'desc'), sorting: (sortField != 'name')}" ng-click="sortBy('name')">Name</th>
<th ng-class="{sorting_asc: (sortField == 'height' && sortDir == 'asc'), sorting_desc: (sortField == 'height' && sortDir == 'desc'), sorting: (sortField != 'height')}" ng-click="sortBy('height')">Height</th>
<th ng-class="{sorting_asc: (sortField == 'points' && sortDir == 'asc'), sorting_desc: (sortField == 'points' && sortDir == 'desc'), sorting: (sortField != 'points')}" ng-click="sortBy('points')">Points</th>
</tr>
</thead>
最佳答案
您应该将类分开,一个用于 .sorting,另一个用于 .asc 和 .desc,例如
.sorting { /* sorting disabled */ }
.sorting.asc { /* put the asc icon, will inherit everything else from sorting */ }
.sorting.desc { /* put the desc icon, will inherit everything else from sorting */ }
然后应用带有映射的ng-class
<thead>
<tr>
<th ng-class="{sorting: (sortField == 'code'), asc: (sortDir == 'asc'), desc: (sortDir == 'desc')}" ng-click="sortBy('code')">Summit code</th>
<th ng-class="" ng-click="sortBy('name')">Name</th>
<th ng-class="" ng-click="sortBy('height')">Height</th>
<th ng-class="" ng-click="sortBy('points')">Points</th>
</tr>
</thead>
关于angularjs - 具有动态值和条件的 ng-class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16982402/