Qual è il modo migliore per applicare in modo condizionale attributi in AngularJS?

Devo essere in grado di aggiungere ad esempio “contenteditable” agli elementi, basato su una variabile booleana sull’ambito.

Esempio di utilizzo:

{{content.title}}

Il risultato sarebbe contenteditable = true aggiunto all’elemento se $scope.editMode stato impostato su true . C’è un modo semplice per implementare questo comportamento degli attributi di class ng? Sto pensando di scrivere una direttiva e di condividerla se non lo sono.

Edit: Riesco a vedere che sembrano esserci alcune somiglianze tra la mia proposta di direttiva attrs e ng-bind-attrs, ma è stata rimossa in 1.0.0.rc3 , perché così?

Sto usando quanto segue per impostare condizionalmente la class attr quando non è ansible utilizzare ng-class (ad esempio quando si disegna SVG):

 ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false' }}" 

Lo stesso approccio dovrebbe funzionare per altri tipi di attributi.

(Penso che tu debba essere sull’ultimo angular instabile per usare ng-attr-, al momento sono su 1.1.4)

Puoi anteporre agli attributi con ng-attr per valutare un’espressione angular. Quando il risultato delle espressioni non definito rimuove il valore dall’attributo.

 Hello World 

Produrrà (quando il valore è falso)

 Hello World 

Quindi non usare https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false perché ciò produrrà la parola “falso” come valore.

 Hello World 

Quando si utilizza questo trucco in una direttiva. Gli attributi per la direttiva saranno falsi se mancano un valore.

Ad esempio, quanto sopra sarebbe falso.

 function post($scope, $el, $attr) { var url = $attr['href'] || https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false; alert(url === https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false); } 

Ho ottenuto questo lavorando impostando l’attributo. E controllando l’applicabilità degli attributi usando il valore booleano per l’attributo.

Ecco lo snippet di codice:

 

Spero che aiuti.

Nell’ultima versione di Angular (1.1.5), hanno incluso una direttiva condizionale chiamata ngIf . È diverso da ngShow e ngHide in quanto gli elementi non sono nascosti, ma non sono inclusi nel DOM. Sono molto utili per componenti che sono costosi da creare ma non usati:

 

{{content.title}}

Per ottenere un attributo per mostrare un valore specifico basato su un controllo booleano, o essere omesso del tutto se il controllo booleano non è riuscito, ho usato quanto segue:

ng-attr-example="{{params.type == 'test' ? 'itWasTest' : undefined }}"

Esempio di utilizzo:

o

base al valore di params.type

{{content.title}}

produrrà quando isTrue = true:

{{content.title}}

e quando isTrue = https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false:

{{content.title}}

In realtà ho scritto una patch per farlo alcuni mesi fa (dopo che qualcuno ha chiesto informazioni su #angularjs su freenode).

Probabilmente non verrà unito, ma è molto simile a ngClass: https://github.com/angular/angular.js/pull/4269

Sia che venga unito o meno, la roba esistente di ng-attr- * è probabilmente adatta alle tue esigenze (come altri hanno già detto), anche se potrebbe essere un po ‘più clunosa della più funzionalità in stile ngClass che stai suggerendo.

Per quanto riguarda la soluzione accettata, quella pubblicata da Ashley Davis, il metodo descritto stampa ancora l’attributo nel DOM, indipendentemente dal fatto che il valore che è stato assegnato non sia definito.

Ad esempio, in una configurazione del campo di input con un modello ng e un attributo valore:

  

Indipendentemente da cosa c’è dietro myValue, l’attributo value viene comunque stampato nel DOM, quindi interpretato. Ng-model, quindi, viene ignorato.

Un po ‘spiacevole, ma usando ng-se fa il trucco:

   

Consiglierei di utilizzare un controllo più dettagliato all’interno delle direttive ng-if 🙂

Inoltre puoi usare un’espressione come questa:

 

Per la convalida del campo di input puoi fare:

  

Questo applicherà l’attributo max a 100 solo se discountType è definito come %

Nel caso in cui abbiate bisogno di una soluzione per Angular 2, allora è semplice, usa il binding delle proprietà come sotto, ad esempio volete rendere l’input di sola lettura in modo condizionale, quindi aggiungere in parentesi quadre l’attrbute seguito da = sign e expression.