Quelle est la meilleure façon d’appliquer conditionnellement des atsortingbuts dans AngularJS?

Je dois pouvoir append par exemple “contenteditable” aux éléments, en fonction d’une variable booléenne sur la scope.

Exemple d’utilisation:

{{content.title}}

Cela aurait pour résultat que contenteditable = true serait ajouté à l’élément si $scope.editMode était défini sur true . Existe-t-il un moyen facile d’implémenter ce comportement d’atsortingbut de type ng-class? 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-attr, mais elle a été supprimée dans la version 1.0.0.rc3 , pourquoi?

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

 ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false' }}" 

La même approche devrait fonctionner pour d’autres types d’atsortingbut.

(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 des atsortingbuts avec ng-attr pour évaluer une expression angular. Lorsque le résultat des expressions non définies, cela supprime la valeur de l’atsortingbut.

 Hello World 

Produira (quand la valeur est fausse)

 Hello World 

Donc, n’utilisez pas https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false car cela produira le mot “https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false” comme valeur.

 Hello World 

Lorsque vous utilisez cette astuce dans une directive. Les atsortingbuts de la directive seront faux s’ils manquent une valeur.

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

 function post($scope, $el, $attr) { var url = $attr['href'] || https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false; alert(url === https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false); } 

Je l’ai fait en définissant durement l’atsortingbut. Et contrôler l’applicabilité de l’atsortingbut en utilisant la valeur booléenne de l’atsortingbut.

Voici l’extrait de code:

 

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 de ngShow et ngHide en ce que les éléments ne sont pas cachés, mais pas du tout dans le DOM. Ils sont très utiles pour les composants coûteux à créer mais non utilisés:

 

{{content.title}}

Pour obtenir un atsortingbut pour afficher une valeur spécifique basée sur une vérification booléenne, ou être omis entièrement 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:

ou

fonction de la valeur de params.type

{{content.title}}

produira quand isTrue = true:

{{content.title}}

et quand isTrue = https://stackoverflow.com/questions/15696416/what-is-the-best-way-to-conditionally-apply-attributes-in-angularjs/false:

{{content.title}}

J’ai en fait écrit un correctif pour le faire il y a quelques mois (après que quelqu’un en ait parlé 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’elle soit fusionnée ou non, la fonctionnalité ng-attr- * existante est probablement adaptée à vos besoins (comme d’autres l’ont mentionné), bien que cela puisse être un peu plus compliqué que les fonctionnalités de style ngClass que vous proposez.

En ce qui concerne la solution acceptée, celle affichée par Ashley Davis, la méthode décrite imprime toujours l’atsortingbut dans le DOM, indépendamment du fait que la valeur qui lui a été atsortingbuée n’est pas définie.

Par exemple, sur un champ de saisie configuré avec un atsortingbut ng et un atsortingbut value:

  

Indépendamment de ce qui se cache derrière myValue, l’atsortingbut value est toujours imprimé dans le DOM, donc interprété. Le modèle de Ng est alors remplacé.

Un peu désagréable, mais en utilisant ng-if fait l’affaire:

   

Je recommande d’utiliser une vérification plus détaillée dans les directives ng-if 🙂

Vous pouvez aussi utiliser une expression comme celle-ci:

 

Pour la validation du champ d’entrée, vous pouvez faire:

  

Cela appliquera l’atsortingbut max à 100 uniquement si discountType est défini comme %

Juste au cas où vous auriez besoin d’une solution pour Angular 2, alors sa simplicité, utilisez la liaison de propriété comme ci-dessous, par exemple vous voulez rendre l’entrée en lecture seulement conditionnellement, puis ajoutez des accolades à l’atsortingbut suivi de = signe et expression.