Quelle est la meilleure façon d'appliquer conditionnellement les attributs dans AngularJS?

vous pouvez préfixer les attributs avec ng-attr pour evaluer une expression angulaire. Lorsque le résultat des expressions non définies supprime la valeur de l'attribut.

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

produira (quand la valeur est fausse)

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

alors n'utilisez pas false parce que cela produira le mot" false " comme valeur.

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

lors de l'utilisation de cette astuce dans une directive. Les attributs de la directive faux si elles sont manquantes d'une valeur.

par exemple, ce qui précède serait faux.

function post($scope, $el, $attr) {
      var url = $attr['href'] || false;
      alert(url === false);
}

j'ai obtenu ce travail en mettant dur l'attribut. Et contrôler l'applicabilité de l'attribut en utilisant la valeur booléenne pour l'attribut.

Voici l'extrait de code:

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

j'espère que cela aidera.

dans la dernière version D'Angular (1.1.5), ils ont inclus une directive conditionnelle appelée ngIf . Il est différent de ngShow et ngHide en ce que les éléments ne sont pas cachés, mais pas inclus dans le DOM du tout. Ils sont très utiles pour les composants qui sont coûteux à créer, mais ne sont pas utilisés:

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

pour obtenir un attribut pour montrer une valeur spécifique basée sur un contrôle booléen, ou être complètement omis si le contrôle booléen a échoué, j'ai utilisé ce qui suit:

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

exemple d'usage:

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

produirait <div class="itWasTest"> ou <div> basé sur la valeur de params.type

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

produira quand isTrue=true : <h1 contenteditable="true">{{content.title}}</h1>

et quand isTrue=false : <h1>{{content.title}}</h1>

j'ai en fait écrit un patch pour faire cela il y a quelques mois (après que quelqu'un l'ait demandé dans #angularjs sur freenode).

il ne sera probablement pas fusionné, mais il est très similaire à ngClass: https://github.com/angular/angular.js/pull/4269

qu'il soit fusionné ou non, le ng-attr - * existant est probablement adapté à vos besoins( comme d'autres l'ont mentionné), bien qu'il puisse être un peu plus clunk que le plus ngclass-style fonctionnalité que vous suggérez.

en ce qui concerne la solution acceptée, celle Postée par Ashley Davis, la méthode décrite imprime toujours l'attribut dans le DOM, indépendamment du fait que la valeur qui lui a été assignée est indéterminée.

par exemple, sur une configuration de champ d'entrée avec à la fois un modèle ng et un attribut de valeur:

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

indépendamment de ce qui se cache derrière ma valeur, l'attribut valeur est toujours imprimé dans le DOM, donc interprété. Ng-model alors, devient dépassé.

un peu désagréable, mais en utilisant ng-if fait le tour:

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

je recommande d'utiliser un contrôle plus détaillé à l'intérieur des directives ng-if:)

vous pouvez aussi utiliser une expression comme celle-ci:

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

pour la validation du champ d'entrée vous pouvez faire:

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

ceci appliquera l'attribut max à 100 uniquement si discountType est défini comme %

juste au cas où vous avez besoin de solution pour L'angle 2 puis son simple, utilisez la liaison de propriété comme ci-dessous, par exemple vous voulez faire l'entrée en lecture seulement conditionnellement, puis Ajouter dans les accolades carrées l'attribute suivi de = signe et expression.

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