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

Je dois pouvoir ajouter par exemple "contenteditable" aux éléments, basé sur une variable booléenne sur la portée.

Exemple d'utilisation:

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

Cela entraînerait l'ajout de contenteditable = true à l'élément s'il $scope.editModeétait défini sur true. Existe-t-il un moyen simple d'implémenter ce comportement d'attribut de classe ng? J'envisage d'écrire une directive et de partager sinon.

Edit: Je peux voir qu'il semble y avoir des similitudes entre ma directive attrs proposée et ng-bind-attrs, mais elle a été supprimée dans 1.0.0.rc3 , pourquoi?

J'utilise ce qui suit pour définir conditionnellement la classe attr lorsque la classe ng ne peut pas être utilisée (par exemple lors du style SVG):

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

La même approche devrait fonctionner pour d'autres types d'attributs.

(Je pense que vous devez être sur le dernier Angular instable pour utiliser ng-attr-, je suis actuellement sur 1.1.4)

Vous pouvez préfixer les attributs avec ng-attrpour évaluer une expression angulaire. Lorsque le résultat des expressions n'est pas défini, cela supprime la valeur de l'attribut.

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

Produira (lorsque la valeur est fausse)

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

Donc, ne l'utilisez pas falsecar cela produira le mot "faux" comme valeur.

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

Lorsque vous utilisez cette astuce dans une directive. Les attributs de la directive seront faux s'il leur manque 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 définissant dur l'attribut. Et contrôler l'applicabilité de l'attribut à l'aide de la valeur booléenne de l'attribut.

Voici l'extrait de code:

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

J'espère que ça aide.

Dans la dernière version d'Angular (1.1.5), ils ont inclus une directive conditionnelle appelée ngIf. Il est différent ngShowet ngHideen ce sens que les éléments ne sont pas cachés, mais pas du tout inclus dans le DOM. Ils sont très utiles pour les composants dont la création est coûteuse mais qui ne sont pas utilisés:

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

Pour obtenir un attribut pour afficher une valeur spécifique basée sur une vérification booléenne, ou être complètement omis si la vérification booléenne a échoué, j'ai utilisé ce qui suit:

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

Exemple d'utilisation:

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

Produirait <div class="itWasTest">ou en <div>fonction de la valeur deparams.type

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

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

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

En ce qui concerne la solution acceptée, celle publié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é affectée n'est pas définie.

Par exemple, sur une configuration de champ de saisie avec à la fois un modèle ng et un attribut value:

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

Peu importe ce qui se cache derrière myValue, la valeur attribut toujours imprimé dans le DOM, donc interprété. Ng-model devient alors annulé.

Un peu désagréable, mais utiliser ng-if fait l'affaire:

<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 recommanderais d'utiliser une vérification plus détaillée à l'intérieur des directives ng-if :)

Vous pouvez également utiliser une expression comme celle-ci:

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

J'ai en fait écrit un patch pour le faire 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 contenu ng-attr- * existant convient probablement à vos besoins (comme d'autres l'ont mentionné), bien qu'il puisse être un peu plus maladroit que la fonctionnalité de style plus ngClass que vous proposez.

Pour la validation du champ de saisie, vous pouvez faire:

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

Il en sera de l'attribut maxà 100seulement si discountTypeest défini comme%

Edit : Cette réponse est liée à Angular2 +! Désolé, j'ai raté le tag!

Réponse originale:

Quant au cas très simple où vous ne souhaitez appliquer (ou définir) un attribut que si une certaine valeur d'entrée a été définie, c'est aussi simple que

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

C'est la même chose que:

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

(Ainsi, optionalValue est appliqué s'il est donné, sinon l'expression est fausse et l'attribut n'est pas appliqué.)

Exemple: j'ai eu le cas, où j'ai laissé appliquer une couleur mais aussi des styles arbitraires, où l'attribut color ne fonctionnait pas car il était déjà défini (même si la couleur @Input () n'était pas donnée):

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

Ainsi, "style.color" n'a été défini que lorsque l'attribut color était présent, sinon l'attribut color de la chaîne "styles" pourrait être utilisé.

Bien sûr, cela pourrait également être réalisé avec

[style.color]="color" 

et

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

Juste au cas où vous auriez besoin d'une solution pour Angular 2, puis sa simple, utilisez la liaison de propriété comme ci-dessous, par exemple, vous voulez faire une entrée en lecture conditionnelle, puis ajoutez des accolades carrées l'attrbute suivi de = signe et expression.

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

A pu faire fonctionner ceci:

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

La bonne chose ici est que si item.isSelected est faux, l'attribut n'est tout simplement pas rendu.