AngularJS ngClass ehdollinen

Onko mitään tapaa tehdä lausekkeesta esimerkiksi ng-class ehdollinen?

Olen kokeillut esimerkiksi seuraavaa:

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

Ongelma tässä koodissa on se, että riippumatta siitä, mikä obj.value1 on, luokkatestiä sovelletaan aina elementtiin. Tehdään näin:

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

Niin kauan kuin obj.value2 ei ole yhtä suuri kuin totuusarvo, luokkaa ei sovelleta. Nyt voin kiertää ensimmäisen esimerkin ongelman tekemällä näin:

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

Jossa checkValue1-funktio näyttää tältä:

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

Ihmettelen vain, onko ng-luokan tarkoitus toimia näin. Olen myös rakentamassa mukautettua direktiiviä, jossa haluaisin tehdä jotain vastaavaa kuin tämä. En kuitenkaan löydä tapaa katsoa lauseketta (ja ehkä se on mahdotonta ja syy siihen, miksi se toimii näin).

Tässä on plnkr näyttääkseni, mitä tarkoitan.

daaawx
Muokattu kysymysT44 maaliskuu 2019 в 7:18
Ohjelmointi
html css angularjs
T00 toukokuu 2013 в 7:38
12 näkymät
Ratkaisu

Ensimmäinen yrityksesi oli melkein oikea, sen pitäisi toimia ilman lainausmerkkejä.

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

Tässä on plnkr.

ngClass-direktiivi toimii minkä tahansa lausekkeen kanssa, joka arvioi totuudenmukaisesti tai väärin, hieman samanlainen kuin Javascript-lausekkeet, mutta joitain eroja, voit lukea täältä. Jos ehtosi on liian monimutkainen, voit käyttää funktiota, joka palauttaa truthy tai falsey, kuten teit kolmannessa yrityksessäsi.

Täydentääkseni: Voit myös käyttää loogisia operaattoreita muodostaaksesi loogisia lausekkeita, kuten

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Bertrand
Muokattu vastausta T33 heinäkuu 2015 в 1:17
Kommentit (5)

ng-luokan käyttäminen ng-repeatin sisällä

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

Jokaiselle task.status-kohdassa olevalle tilalle käytetään eri luokkaa rivillä.

JakeGould
Muokattu vastausta T11 huhtikuu 2016 в 2:52
Kommentit (2)

Angularin syntaksi on käyttää :-operaattoria, joka vastaa if-modifikaattoria.

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

Lisää clearfix-luokka parillisille riveille. Tästä huolimatta lauseke voi olla mitä tahansa, mitä meillä voi olla tavallisessa if-ehdossa, ja sen pitäisi evaluoitua joko true tai false.

Tristan
Muokattu vastausta T00 elokuu 2018 в 9:03
Kommentit (1)