Qual è il modo migliore per applicare condizionalmente gli attributi in AngularJS?

Devo poter aggiungere ad esempio "contenteditable" agli elementi, basato su una variabile booleana nell'ambito.

Esempio di utilizzo:

<h1 attrs="{'contenteditable=\"true\"': editMode}">{{content.title}}</h1>

Si tradurrebbe in contenteditable = true aggiunto all'elemento se $scope.editModeimpostato su true. C'è un modo semplice per implementare questo comportamento di attributo simile alla classe ng? Sto pensando di scrivere una direttiva e condividerla in caso contrario.

Modifica: vedo che sembrano esserci delle somiglianze tra la mia proposta attrs direttiva e ng-bind-attrs, ma è stata rimossa in 1.0.0.rc3 , perché?

Sto usando quanto segue per impostare condizionatamente la classe attr quando ng-class non può essere usata (ad esempio quando si disegna lo SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

Lo stesso approccio dovrebbe funzionare per altri tipi di attributi.

(Penso che devi essere sull'ultimo Angolare instabile per usare ng-attr-, al momento sono su 1.1.4)

È possibile ng-attraggiungere un prefisso agli attributi per valutare un'espressione angolare. Quando il risultato delle espressioni non definito, questo rimuove il valore dall'attributo.

<a ng-attr-href="{{value || undefined}}">Hello World</a>

Produrrà (quando il valore è falso)

<a ng-attr-href="{{value || undefined}}" href>Hello World</a>

Quindi non usare falseperché questo produrrà la parola "falso" come valore.

<a ng-attr-href="{{value || false}}" href="false">Hello World</a>

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

Ad esempio, quanto sopra sarebbe falso.

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}

Ho funzionato impostando duramente l'attributo. E controllando l'applicabilità dell'attributo usando il valore booleano per l'attributo.

Ecco il frammento di codice:

<div contenteditable="{{ condition ? 'true' : 'false'}}"></div>

Spero che aiuti.

Nell'ultima versione di Angular (1.1.5), hanno incluso una direttiva condizionale chiamata ngIf. È diverso da ngShowe ngHidein quanto gli elementi non sono nascosti, ma non sono affatto inclusi nel DOM. Sono molto utili per i componenti che sono costosi da creare ma non utilizzati:

<h1 ng-if="editMode" contenteditable=true>{{content.title}}</h1>

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

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

Esempio di utilizzo:

<div ng-attr-class="{{params.type == 'test' ? 'itWasTest' : undefined }}">

Output <div class="itWasTest">o <div>basato sul valore diparams.type

<h1 ng-attr-contenteditable="{{isTrue || undefined }}">{{content.title}}</h1>

produrrà quando isTrue = true: <h1 contenteditable="true">{{content.title}}</h1>

e quando isTrue = false: <h1>{{content.title}}</h1>

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, su un'impostazione del campo di input con un modello ng e un attributo value:

<input type="text" name="myInput" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />

Indipendentemente da ciò che sta dietro myValue, il valore attributo viene comunque stampato nel DOM, quindi interpretato. Ng-model quindi, viene sostituito.

Un po 'spiacevole, ma usando ng-if il trucco:

<input type="text" name="myInput" data-ng-if="value" data-ng-attr-value="{{myValue}}" data-ng-model="myModel" />
<input type="text" name="myInput" data-ng-if="!value" data-ng-model="myModel" />

Consiglierei di utilizzare un controllo più dettagliato all'interno delle direttive ng-if :)

Inoltre puoi usare un'espressione come questa:

<h1 ng-attr-contenteditable="{{ editMode ? true : false }}"></h1>

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

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

Indipendentemente dal fatto 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ù clunk della funzionalità in stile ngClass che stai suggerendo.

Per la convalida del campo di input è possibile eseguire:

<input ng-model="discount" type="number" ng-attr-max="{{discountType == '%' ? 100 : undefined}}">

Ciò si applica l'attributo maxdi 100solo se discountTypeè definito come%

Modifica : questa risposta è correlata ad Angular2 +! Scusa, ho perso il tag!

Risposta originale:

Per quanto riguarda il caso molto semplice in cui si desidera applicare (o impostare) un attributo solo se è stato impostato un determinato valore di Input, è facile come

<my-element [conditionalAttr]="optionalValue || false">

È lo stesso di:

<my-element [conditionalAttr]="optionalValue ? optionalValue : false">

(Quindi optionalValue viene applicato se indicato altrimenti l'espressione è falsa e l'attributo non viene applicato.)

Esempio: ho avuto il caso, in cui ho lasciato applicare un colore ma anche stili arbitrari, in cui l'attributo color non funzionava come era già impostato (anche se il colore @Input () non è stato fornito):

@Component({
  selector: "rb-icon",
  styleUrls: ["icon.component.scss"],
  template: "<span class="ic-{{icon}}" [style.color]="color==color" [ngStyle]="styleObj" ></span>",
})
export class IconComponent {
   @Input() icon: string;
   @Input() color: string;
   @Input() styles: string;

   private styleObj: object;
...
}

Pertanto, "style.color" è stato impostato solo quando era presente l'attributo color, altrimenti è stato possibile utilizzare l'attributo color nella stringa "styles".

Certamente, questo potrebbe anche essere raggiunto con

[style.color]="color" 

e

@Input color: (string | boolean) = false;

Nel caso in cui tu abbia bisogno di una soluzione per Angular 2, allora è semplice, usa il binding di proprietà come di seguito, ad esempio vuoi fare in modo che l'input venga letto solo in modo condizionale, quindi aggiungi tra parentesi quadre l'attrazione seguita da = segno ed espressione.

<input [readonly]="mode=='VIEW'"> 

È stato in grado di farlo funzionare:

ng-attr-aria-current="{{::item.isSelected==true ? 'page' : undefined}}"

La cosa bella qui è che se item.isSelected è falso, l'attributo semplicemente non viene visualizzato.