AngularJS ngClass feltételes

Van rá mód, hogy egy olyan kifejezés, mint ng-class feltételes legyen?

Például a következőt próbáltam:

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

A probléma ezzel a kóddal az, hogy nem számít, hogy mi az obj.value1, az osztályteszt mindig az elemre kerül alkalmazásra. Ezt csinálja:

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

Amíg az obj.value2 nem egyenlő egy igaz értékkel, az osztályt nem alkalmazzuk. Most már meg tudom kerülni az első példa problémáját a következőkkel:

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

Ahol az checkValue1 függvény így néz ki:

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

Csak azon gondolkodom, hogy vajon így kellene-e működnie az ng-class-nak. Én is építek egy egyéni direktívát, ahol valami ehhez hasonlót szeretnék csinálni. Azonban nem találom'nem találok módot arra, hogy egy kifejezést figyeljek (és talán ez lehetetlen és ez az oka annak, hogy így működik).

Itt van egy plnkr, hogy megmutassam, mire gondolok.

daaawx
Szerkesztett kérdés 29. március 2019 в 7:18
Programozás
html css angularjs
13. május 2013 в 7:38
29 nézetek
Megoldás

Az első próbálkozásod majdnem helyes volt, Az idézőjelek nélkül is működnie kell.

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

Itt van egy plnkr.

Az ngClass direktíva bármilyen kifejezéssel működik, amely igaz vagy hamis értékelést ad, kicsit hasonló a Javascript kifejezésekhez, de van néhány különbség, erről itt olvashatsz. Ha a feltételes feltételed túl bonyolult, akkor használhatsz egy olyan függvényt, ami truthy vagy falsey értéket ad vissza, ahogy a harmadik próbálkozásodban is tetted.

Csak kiegészítésképpen: Logikai operátorokat is használhatsz logikai kifejezések megalkotására, mint pl.

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Bertrand
Szerkesztett válasz 2. július 2015 в 1:17
Kommentárok (5)

Az ng-osztály használata az ng-repeat-en belül

<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>

A task.status minden egyes státuszához más-más osztályt használunk a sorhoz.

JakeGould
Szerkesztett válasz 5. április 2016 в 2:52
Kommentárok (2)

A szögletes szintaxis a : operátor használata a if módosítónak megfelelő feladat elvégzésére.

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

Páros sorokhoz clearfix osztály hozzáadása. Ennek ellenére a kifejezés lehet bármi, amit a normál if feltételben lehetünk, és vagy igaznak vagy hamisnak kell értékelnie.

Tristan
Szerkesztett válasz 13. augusztus 2018 в 9:03
Kommentárok (1)