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 für den Bereich.

Anwendungsbeispiel:

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

Würde dazu führen, dass contenteditable = true zum Element hinzugefügt wird, wenn $scope.editModeauf gesetzt wurde true. Gibt es eine einfache Möglichkeit, dieses Attributverhalten wie bei einer ng-Klasse zu implementieren? Ich denke darüber nach, eine Richtlinie zu schreiben und zu teilen, wenn nicht.

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

Ich verwende Folgendes, um die Klasse attr bedingt festzulegen, wenn ng-class nicht verwendet werden kann (zum Beispiel beim Stylen von SVG):

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

Der gleiche Ansatz sollte für andere Attributtypen funktionieren.

(Ich denke, Sie müssen auf dem neuesten instabilen Angular sein, um ng-attr- verwenden zu können. Ich bin derzeit auf 1.1.4)

Sie können Attributen ng-attrein Präfix voranstellen, um einen Winkelausdruck auszuwerten. Wenn das Ergebnis der Ausdrücke undefiniert ist, wird der Wert aus dem Attribut entfernt.

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

Wird produzieren (wenn der Wert falsch ist)

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

Verwenden Sie es also nicht, falseda dies das Wort "false" als Wert ergibt.

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

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'] || false;
      alert(url === false);
}

Ich habe das funktioniert, indem ich das Attribut hart eingestellt habe. Steuern der Anwendbarkeit von Attributen mithilfe des Booleschen Werts für das Attribut.

Hier ist das Code-Snippet:

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

Ich hoffe das hilft.

In der neuesten Version von Angular (1.1.5) haben sie eine bedingte Direktive namens aufgerufen ngIf. Es unterscheidet sich von ngShowund ngHidedarin, dass die Elemente nicht ausgeblendet, aber überhaupt nicht im DOM enthalten sind. Sie sind sehr nützlich für Komponenten, deren Erstellung teuer ist, die aber nicht verwendet werden:

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

Um ein Attribut zu erhalten, das einen bestimmten Wert basierend auf einer booleschen Prüfung anzeigt oder vollständig weggelassen wird, wenn die boolesche Prüfung fehlgeschlagen ist, habe ich Folgendes verwendet:

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

Anwendungsbeispiel:

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

Würde ausgeben <div class="itWasTest">oder <div>basierend auf dem Wert vonparams.type

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

wird produzieren, wenn isTrue = true: <h1 contenteditable="true">{{content.title}}</h1>

und wenn isTrue = false: <h1>{{content.title}}</h1>

In Bezug auf die akzeptierte Lösung, die von Ashley Davis veröffentlicht wurde, druckt die beschriebene Methode das Attribut weiterhin im DOM, unabhängig davon, dass der ihm zugewiesene Wert undefiniert ist.

Beispiel: Bei einem Eingabefeld-Setup mit einem ng-Modell und einem Wertattribut:

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

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

Ein bisschen unangenehm, aber ng-if macht den Trick:

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

Ich würde empfehlen, eine detailliertere Prüfung in den ng-if-Anweisungen durchzuführen :)

Sie können auch einen Ausdruck wie diesen verwenden:

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

Ich habe tatsächlich vor ein paar Monaten einen Patch dazu geschrieben (nachdem jemand in #angularjs auf freenode danach gefragt hat).

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

Unabhängig davon, ob es zusammengeführt wird oder nicht, ist das vorhandene ng-attr- * -Material wahrscheinlich für Ihre Anforderungen geeignet (wie andere bereits erwähnt haben), obwohl es möglicherweise etwas klobiger ist als die von Ihnen vorgeschlagene ngClass-ähnliche Funktionalität.

Für die Eingabefeldvalidierung können Sie Folgendes tun:

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

Dadurch wird das Attribut nur angewendet max, 100wenn discountTypedefiniert ist als%

Bearbeiten : Diese Antwort bezieht sich auf Angular2 +! Entschuldigung, ich habe den Tag verpasst!

Ursprüngliche Antwort:

Der sehr einfache Fall, in dem Sie ein Attribut nur anwenden (oder festlegen) möchten, wenn ein bestimmter Eingabewert festgelegt wurde, ist so einfach wie

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

Es ist das gleiche wie:

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

(OptionalValue wird also angewendet, wenn der Ausdruck falsch ist und das Attribut nicht angewendet wird.)

Beispiel: Ich hatte den Fall, dass ich eine Farbe anwenden ließ, aber auch beliebige Stile, bei denen das Farbattribut nicht funktionierte, da es bereits festgelegt war (auch wenn die Farbe @Input () nicht angegeben wurde):

@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;
...
}

Daher wurde "style.color" nur festgelegt, wenn das Farbattribut vorhanden war. Andernfalls konnte das Farbattribut in der Zeichenfolge "styles" verwendet werden.

Dies könnte natürlich auch mit erreicht werden

[style.color]="color" 

und

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

Nur für den Fall, dass Sie eine Lösung für Angular 2 benötigen, verwenden Sie einfach die unten stehende Eigenschaftsbindung, z. B. möchten Sie die Eingabe nur bedingt schreibgeschützt machen und dann in attrigen Klammern das Attribut gefolgt von = Zeichen und Ausdruck einfügen.

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

Konnte dies zum Laufen bringen:

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

Das Schöne dabei ist, dass wenn item.isSelected false ist, das Attribut einfach nicht gerendert wird.