ng-Klasse mit dynamischen Werten und Bedingungen
In meinem controller gibt es 2 vars verfolgen des status Sortieren einer Tabelle:
/* sorting */
$scope.sortField = 'code';
$scope.sortDir = 'asc';
In der css es gibt 3 unterschiedliche Klassen repräsentieren die Sortierung status:
table.table thead .sorting { ...} /*sorting disabled*/
table.table thead .sorting_asc { ... } /*sorting asc*/
table.table thead .sorting_desc { ... } /*sorting desc*/
Ich würde gerne eine ng-Klasse-Ausdruck dynamisch ändern Sie die Sortier-icon auf meinem Tisch-Säule, dies ist die 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>
Dies ist eine mögliche Umsetzung (nicht sehr klug)
<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>
- check this: stackoverflow.com/questions/7792652/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie separate Klassen, eine für .Sortieren, beenden Sie die anderen für .asc und .desc, wie
dann gelten die
ng-class
mit einem mapping