Er der nogen måde at lave et udtryk for noget som ng-class
til at være en betingelse?
Jeg har f.eks. prøvet følgende:
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
Problemet med denne kode er, at uanset hvad obj.value1
er, så anvendes klassetesten altid på elementet. Jeg gør dette:
<span ng-class="{test: obj.value2}">test</span>
Så længe obj.value2
ikke er lig med en sandhedsværdi, anvendes klassetesten ikke. Nu kan jeg arbejde rundt om problemet i det første eksempel ved at gøre dette:
<span ng-class="{test: checkValue1()}">test</span>
Hvor funktionen checkValue1
ser således ud:
$scope.checkValue1 = function() {
return $scope.obj.value === 'somevalue';
}
Jeg undrer mig bare over, om det er sådan, at ng-class
skal fungere. Jeg er også ved at bygge et brugerdefineret direktiv, hvor jeg gerne vil gøre noget, der ligner dette. Jeg kan dog ikke finde en måde at se et udtryk på (og måske er det umuligt og grunden til at det virker sådan her).
Her er en plnkr for at vise hvad jeg mener.
Dit første forsøg var næsten rigtigt, det burde virke uden anførselstegn.
{test: obj.value1 == 'someothervalue'}
Her er en plnkr.
ngClass-direktivet vil fungere med ethvert udtryk, der evalueres sandt eller falsk, lidt ligesom Javascript-udtryk, men med nogle forskelle, du kan læse om her. Hvis din betingelse er for kompleks, kan du bruge en funktion, der returnerer truthy eller falsey, som du gjorde i dit tredje forsøg.
Bare for at supplere: Du kan også bruge logiske operatorer til at danne logiske udtryk som f.eks.
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Brug af ng-class i ng-repeat
<table>
<tbody>
<tr ng-repeat="task in todos"
ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
<td>{{$index + 1}}</td>
<td>{{task.name}}</td>
<td>{{task.date|date:'yyyy-MM-dd'}}</td>
<td>{{task.status}}</td>
</tr>
</tbody>
</table>
For hver status i task.status anvendes en anden klasse til rækken.
Angular-syntaks er at bruge operatoren : til at udføre det, der svarer til en if-modifikator
<div ng-class="{ 'clearfix' : (row % 2) == 0 }">
Tilføj clearfix-klassen til lige rækker. Ikke desto mindre kan udtrykket være alt, hvad vi kan have i en normal if-tilstand, og det skal evalueres til enten sandt eller falsk.