ngclass La sintassi di espressione di angularjs è questa in ng-class




ng-class if (4)

Il Manuale di Noular AngularJS ha un codice che riduce la manipolazione della classe a un'espressione semplice e al binding:

<a ng-click="flags.open=!flags.open">...<div ng-class="{active:flags.open}">

Tuttavia, qual è l'espressione sintassi in ng-class? Capisco che una barra verticale (|) passi attraverso un filtro e che un filtro possa essere passato parametri dopo un colon ma il codice sopra sta facendo qualcosa di diverso. Se la variabile scope a destra viene valutata true, viene inclusa l'espressione a sinistra, altrimenti viene eliminata.

È specifico della direttiva ng-class? C'è qualche documentazione su http://docs.angularjs.org che spiega questo?


probabilmente hai anche visto qualcosa di simile a questo:

<div ng-class="{true: 'complete'}[item.Id != 0]"></div>

Sintassi molto rad.

EDIT: cosa succede qui, è che la class " complete " viene aggiunta all'elemento if(item.Id != 0) . In alternativa, potremmo scrivere: <div ng-class="{false: 'cookieless'}[monsterEatsCookies('Elmo')] . Come deciso dalla funzione monsterEatsCookies, Elmo non mangia i cookie in modo che questa funzione restituisca false l'html elemento guadagna una classe chiamata cookieless .

Un semplice esempio: <div ng-class="{false: 'DoubleNegative'}[1 == 0] . 1 !== 0 che è" false "- la classe" DoubleNegative "viene aggiunta all'elemento.

<div ng-class="{  true:   'complete'  } [item.Id != 0]"></div>

`

            | |      | |          | | |            |
            | |result| |className | | |            |
            |                     | | |            |
            |       function      | | | condition  |

appendice

Inoltre, ho appena realizzato che è possibile utilizzare una varietà di tasti diversi per mappare le proprie condizioni. Per esempio:

ng-class="{ true: 'highlight', undefined: 'mute' }[ item.hasValue ]"

La classe mute verrà applicata se l'elemento non ha la proprietà " hasValue ". Inoltre, puoi applicare una classe per un determinato tipo o valore:

{'Jonathan Chapman': 'embolden', '[object Object]': 'hide'}[ item.toString() ]

Nella seguente collezione, questo incoraggerebbe il nome di una persona nascondendo gli oggetti che sono oggetti:

[
    'Jonathan Chapman',
    { aka: 'Johnny Applyseed' },
    'Brad Pitt',
    { details: 'Fights Zombies' }
]

Con questo, è possibile guardare valori specifici in qualsiasi proprietà $ scope. Suppongo che questo potrebbe essere molto utile a volte.

Saluti


come questo esempio qui sotto:

div(ng-class=" condition ? ['class_one', 'class_two'] : ['class_three', 'class_four']")

Questo è menzionato brevemente (troppo brevemente, secondo me) nella documentazione di ngClass . Se si passa un oggetto a ngClass , allora applicherà ogni chiave dell'oggetto come classe all'elemento se il valore di tale chiave è true. Per esempio:

$scope.first = true
$scope.second = false
$scope.third = true

con

<div ng-class="{a: first, b: second, c: third}"></div>

risulterebbe in

<div class="a c"></div>

ng-click="flags.open=!flags.open"

cambia il valore di flags.open su true o false.
E

ng-class="{active:flags.open}"  

decide se la classe active è presente o meno in base al valore di flags.open .
Si prega di consultare il Fiddle dimostra l'esempio precedente.





angularjs