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

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

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.

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>

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

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

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 :)

Sie können auch einen Ausdruck wie diesen verwenden:

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

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.

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;

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

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.