Was ist der beste Weg um Attribute in AngularJS bedingt anzuwenden?

Ich muss in der Lage sein, beispielsweise “contenteditable” zu Elementen hinzuzufügen, basierend auf einer booleschen Variablen auf dem Bereich.

Beispiel Verwendung:

{{content.title}}

Würde dazu führen, dass $scope.editMode = true dem Element hinzugefügt wird, wenn $scope.editMode auf true . Gibt es eine einfache Möglichkeit, dieses Attributverhalten in der ng-class zu implementieren? Ich überlege, eine Richtlinie zu schreiben und zu teilen, wenn nicht.

Edit: Ich kann sehen, dass es einige Ähnlichkeiten zwischen meiner vorgeschlagenen attrs-Direktive und ng-bind-attrs gibt, aber es wurde in 1.0.0.rc3 entfernt , warum?

Ich benutze das folgende, um die class attr zu bestimmen, wenn ng-class nicht verwendet werden kann (zum Beispiel beim Styling von 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' }}" 

Derselbe Ansatz sollte für andere Attributtypen funktionieren.

(Ich denke du musst auf neustem instabilen Angular sein um ng-attr- zu benutzen, ich bin momentan auf 1.1.4)

Sie können Attribute mit ng-attr um einen ng-attr Ausdruck ng-attr . Wenn das Ergebnis der Ausdrücke nicht definiert ist, wird der Wert aus dem Attribut entfernt.

 Hello World 

Wird produzieren (wenn der Wert falsch ist)

 Hello World 

Verwenden Sie also nicht https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false da dies das Wort “https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false” als Wert erzeugt.

 Hello World 

Wenn Sie diesen Trick in einer Direktive verwenden. Die Attribute für die Direktive sind falsch, wenn ihnen ein Wert fehlt.

Zum Beispiel wäre das obige falsch.

 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); } 

Ich habe das funktioniert, indem ich das Attribut fest gesetzt habe. Und die Attributanwendbarkeit mit dem booleschen Wert für das Attribut steuern.

Hier ist das Code-Snippet:

 

Ich hoffe das hilft.

In der neuesten Version von Angular (1.1.5) haben sie eine bedingte Direktive namens ngIf . Es unterscheidet sich von ngShow und ngHide darin, dass die Elemente nicht versteckt sind, aber nicht im DOM enthalten sind. Sie sind sehr nützlich für Komponenten, die teuer zu erstellen sind, aber nicht verwendet werden:

 

{{content.title}}

Um ein Attribut basierend auf einer booleschen Überprüfung einen bestimmten Wert anzeigen zu lassen, oder ganz weggelassen werden, wenn die boolesche Überprüfung fehlgeschlagen ist, habe ich Folgendes verwendet:

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

Beispielverwendung:

Würde

oder

basierend auf dem Wert von params.type

{{content.title}}

wird erzeugt, wenn isTrue = true:

{{content.title}}

contenteditable =

{{content.title}}

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

{{content.title}}

Ich habe vor ein paar Monaten einen Patch geschrieben (nachdem jemand in #angularjs auf Freenode danach gefragt hat).

Es wird wahrscheinlich nicht zusammengeführt, aber es ist sehr ähnlich zu ngClass: https://github.com/angular/angular.js/pull/4269

Ob es zusammengeführt wird oder nicht, das vorhandene ng-attr-Zeug ist wahrscheinlich für Ihre Bedürfnisse geeignet (wie andere bereits erwähnt haben), obwohl es ein bisschen dümmer sein könnte als die eher ngClass-ähnliche functionalität, die Sie vorschlagen.

Hinsichtlich der akzeptierten Lösung, die von Ashley Davis gepostet wurde, druckt die beschriebene Methode das Attribut immer noch im DOM, ungeachtet der Tatsache, dass der Wert, den es zugewiesen wurde, nicht definiert ist.

Zum Beispiel bei einem Eingabefeld, das mit einem ng-Modell und einem value-Attribut eingerichtet wurde:

  

Unabhängig davon, was hinter myValue steht, wird das Wertattribut immer noch im DOM gedruckt und somit interpretiert. Ng-Modell wird dann überschrieben.

Ein bisschen unangenehm, aber mit ng-wenn der Trick:

   

Ich würde empfehlen, eine detailliertere Überprüfung in den ng-if-statementen zu verwenden 🙂

Sie können auch einen Ausdruck wie diesen verwenden:

 

Für die validation von Eingabefeldern können Sie Folgendes tun:

  

Dadurch wird das Attribut max nur dann auf 100 angewendet, wenn discountType als % definiert ist.

Für den Fall, dass Sie eine Lösung für Angular 2 benötigen, verwenden Sie einfach die Eigenschaft binding wie unten, z. B. möchten Sie die Eingabe nur bedingt schreiben, dann fügen Sie in eckigen Klammern die Attrute gefolgt von = sign und expression hinzu.