AngularJS ngClass voorwaardelijk

Is er een manier om een uitdrukking voor iets als ng-class een voorwaardelijk te laten zijn?

Ik heb bijvoorbeeld het volgende geprobeerd:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

Het probleem met deze code is dat het niet uitmaakt wat obj.value1 is, de class test wordt altijd toegepast op het element. Als ik dit doe:

<span ng-class="{test: obj.value2}">test</span>

Zolang obj.value2 niet gelijk is aan een waarheidsgetrouwe waarde, wordt de class niet toegepast. Nu kan ik het probleem in het eerste voorbeeld omzeilen door dit te doen:

<span ng-class="{test: checkValue1()}">test</span>

Waarbij de checkValue1 functie er als volgt uitziet:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

Ik vraag me af of dit is hoe ng-class hoort te werken. Ik ben ook een aangepaste richtlijn aan het bouwen waar ik iets soortgelijks als dit zou willen doen. Ik kan echter geen manier vinden om naar een expressie te kijken (en misschien is dat onmogelijk en de reden waarom het zo werkt).

Hier is een plnkr om te laten zien wat ik bedoel.

daaawx
Bewerkte vraag 29ste4 maart 2019 в 7:18
Programmering
html css angularjs
13de0 mei 2013 в 7:38
19 views
Oplossing

Je eerste poging was bijna goed, Het zou moeten werken zonder de aanhalingstekens.

{test: obj.value1 == 'someothervalue'}

Hier is een plnkr.

De ngClass directive zal werken met elke expressie die truthy of falsey evalueert, een beetje vergelijkbaar met Javascript expressies maar met enkele verschillen, waarover je kan lezen hier. Als je voorwaarde te complex is, dan kan je een functie gebruiken die truthy of falsey retourneert, zoals je deed in je derde poging.

Even ter aanvulling: Je kunt logische operatoren ook gebruiken om logische uitdrukkingen te vormen, zoals

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Bertrand
Bewerkt antwoord 2de3 juli 2015 в 1:17
Commentaren (5)

Gebruik van ng-klasse binnen 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>

Voor elke status in task.status wordt een andere klasse gebruikt voor de rij.

JakeGould
Bewerkt antwoord 5de1 april 2016 в 2:52
Commentaren (2)

Angular syntaxis is het gebruik van de : operator om het equivalent van een if modifier uit te voeren

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

Voeg clearfix klasse toe aan even rijen. Desalniettemin kan de expressie alles zijn wat we in een normale if conditie kunnen hebben en het moet evalueren naar ofwel waar of onwaar.

Tristan
Bewerkt antwoord 13de0 augustus 2018 в 9:03
Commentaren (1)