Comment rendre un événement ng-click conditionnel ?

Question

J'ai ce code à l'intérieur de ng-repeat :

<a href="#" class="disabled" ng-click="doSomething(object)">Do something</a>

Comment faire une condition que le bouton est désactivé quand il a class="disabled" ?

Ou existe-t-il un moyen de le faire en Javascript pour que cela ressemble à.. :

$('.do-something-button').click(function(){
  if (!$(this).hasClass('disabled')) {
    do something
  }
});

Answer 1

Il n'est pas bon de manipuler le DOM (y compris la vérification des attributs) en dehors des directives. Vous pouvez ajouter dans la portée une valeur indiquant si le lien doit être désactivé.

Mais l'autre problème est que ngDisabled ne fonctionne pas sur autre chose que les contrôles de formulaire, donc vous ne pouvez pas l'utiliser avec <a>, mais vous pouvez l'utiliser avec <bouton> et le styliser comme lien.

Un autre moyen consiste à utiliser l'évaluation paresseuse d'expressions telles que isDisabled || action() donc l'action ne serait pas appelée si isDisabled est vrai.

Voilà les deux solutions : http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Answer 2

Nous pouvons ajouter l'événement ng-click de manière conditionnelle sans utiliser la classe désactivée.

HTML :

<div ng-repeat="object in objects">
<span ng-click="!object.status && disableIt(object)">{{object.value}}</span>
</div>

Answer 3

J'utilise l'expression && qui fonctionne parfaitement pour moi.

Par exemple,

<button ng-model="vm.slideOneValid" ng-disabled="!vm.slideOneValid" ng-click="vm.slideOneValid && vm.nextSlide()" class="btn btn-light-green btn-medium pull-right">Next</button>

Si vm.slideOneValid est faux, la deuxième partie de l'expression n'est pas exécutée. Je sais que c'est mettre de la logique dans le DOM, mais c'est un moyen rapide et sale pour que ng-disabled et ng-click se placent bien.

N'oubliez pas d'ajouter ng-model à l'élément pour que ng-disabled fonctionne.

Answer 4

En gros, ng-click vérifie d'abord le isDisabled et en fonction de sa valeur, il décidera si la fonction doit être appelée ou non.

<span ng-click="(isDisabled) || clicked()">Do something</span>

OU lisez-le comme

<span ng-click="(if this value is true function clicked won't be called. and if it's false the clicked will be called) || clicked()">Do something</span>

Answer 5

J'ai eu ce problème également et j'ai découvert que si vous enlevez simplement le "#", le problème disparaît. Comme ceci :

<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>