1

在我的控制器中，有 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-class 表达式来动态更改表格列上的排序图标，这是 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>
4

1 回答 1

2

您应该将类​​分开，一个用于 .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>
于 2013-06-07T11:26:21.253 回答