it-swarm.com.de

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

Ich muss in der Lage sein, zum Beispiel "contenteditable" Elementen hinzuzufügen, basierend auf einer booleschen Variablen im Gültigkeitsbereich.

Anwendungsbeispiel:

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

Würde das Element contenteditable = true hinzugefügt, wenn $scope.editMode auf true..__ gesetzt ist. Gibt es eine einfache Möglichkeit, diese ng-Klasse wie Attributverhalten zu implementieren? Ich überlege mir, eine Direktive zu schreiben und wenn nicht zu teilen.

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

269
Kenneth Lynne

Ich verwende Folgendes, um die Klasse attr bedingt festzulegen, wenn ng-class nicht verwendet werden kann (beispielsweise beim SVG-Styling):

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

Der gleiche Ansatz sollte für andere Attributtypen funktionieren.

(Ich denke, du musst auf dem neuesten instabilen Angular sein, um ng-attr- verwenden zu können, ich bin derzeit auf 1.1.4.)

258
Ashley Davis

Sie können den Attributen mit ng-attr ein Präfix geben, um einen Angular-Ausdruck auszuwerten. Wenn das Ergebnis der Ausdrücke nicht definiert 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 also nicht false, da dies das Wort "false" als Wert erzeugt.

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

Ich habe dies durch hartes Einstellen des Attributs erhalten. Und die Gültigkeit des Attributs mit dem booleschen Wert für das Attribut steuern.

Hier ist das Code-Snippet:

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

Ich hoffe das hilft.

92
jsbisht

In der neuesten Version von Angular (1.1.5) wurde eine bedingte Direktive mit dem Namen ngIf eingefügt. Es unterscheidet sich von ngShow und ngHide darin, dass die Elemente nicht verborgen sind, aber überhaupt nicht im DOM enthalten sind. Sie sind sehr nützlich für Komponenten, deren Erstellung teuer ist, aber nicht verwendet wird:

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

Um ein Attribut zur Anzeige eines bestimmten Werts basierend auf einer booleschen Prüfung zu erhalten oder ganz wegzulassen, wenn die boolesche Prüfung fehlgeschlagen ist, habe ich Folgendes verwendet:

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

Verwendungsbeispiel:

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

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

13
Glen

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

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

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

9
Garfi

Bezüglich der akzeptierten Lösung, der von Ashley Davis veröffentlichten, gibt die beschriebene Methode das Attribut immer noch im DOM aus, unabhängig davon, ob der zugewiesene Wert nicht definiert ist.

Zum Beispiel für ein Eingabefeld-Setup mit einem ng-model und einem value-Attribut:

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

Unabhängig davon, was sich hinter myValue befindet, wird das Attribut value 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, einen detaillierteren Check in den ng-if-Direktiven zu verwenden :)

5
alexc

Sie können auch einen Ausdruck wie diesen verwenden:

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

Ich habe tatsächlich vor einigen Monaten einen Patch geschrieben (nachdem jemand in #angularjs auf freenode danach gefragt hatte).

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

Unabhängig davon, ob es zusammengeführt wird oder nicht, der vorhandene ng-attr- * -Stoff ist wahrscheinlich für Ihre Bedürfnisse geeignet (wie andere bereits erwähnt haben), auch wenn er etwas unübersichtlicher ist als die von Ihnen vorgeschlagene ngClass-Funktionalität.

5
chronicsalsa

Für den sehr einfachen Fall, dass Sie ein Attribut nur anwenden (oder festlegen) möchten, wenn ein bestimmter Eingabewert festgelegt wurde, ist dies so einfach wie

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

Es ist dasselbe wie:

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

(Daher wird optionalValue angewendet, wenn angegeben, dass der Ausdruck falsch ist und das Attribut nicht angewendet wird.)

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

@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 könnte 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;
1
Zaphoid

Nur für den Fall, dass Sie eine Lösung für Angular 2 benötigen, verwenden Sie einfach die wie unten beschriebene Eigenschaftsbindung, z. Wenn Sie die Eingabe nur bedingt lesen möchten, fügen Sie in eckigen Klammern das Attribut gefolgt von = Zeichen und Ausdruck ein.

<input [readonly]="mode=='VIEW'"> 
0
Sanjay Singh

Für die Validierung des Eingabefelds können Sie Folgendes tun:

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

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

0
Nestor Britez