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?
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.)
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.