web-dev-qa-db-fra.com

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

J'ai ce code dans ng-repeat:

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

Comment faire pour que le bouton soit 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
  }
});
javascripthtmlangularjs
112
Alon

Il n'est pas bon de manipuler avec DOM (y compris la vérification des attributs) n'importe où sauf les directives. Vous pouvez ajouter à la portée une valeur indiquant si le lien doit être désactivé.

Mais un autre problème est que ngDisabled ne fonctionne que sur les contrôles de formulaire. Vous ne pouvez donc pas l’utiliser avec <a>, mais vous pouvez l’utiliser avec <button> et l’appeler comme lien.

Une autre méthode consiste à utiliser une évaluation paresseuse d'expressions telles que isDisabled || action() pour que l'action ne soit pas appelée si isDisabled est vrai.

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

202
Valentyn Shybanov

Nous pouvons ajouter un é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>
45
Rubi saini

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 déclenchée. Je sais que cela met de la logique dans le DOM, mais c’est un moyen rapide de ng-disabled et ng-click pour placer Nice.

Rappelez-vous simplement d’ajouter ng-model à l’élément pour que ng-disabled fonctionne.

6
Nick Res

Fondamentalement, ng-click vérifie d’abord la isDisabled et, en fonction de sa valeur, décide si la fonction doit être appelée ou non.

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

OU le lire 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>
3
Beginner

Vous pouvez essayer d'utiliser ng-class.
Voici mon exemple simple:
http://plnkr.co/edit/wS3QkQ5dvHNdc6Lb8ZSF?p=preview

<div ng-repeat="object in objects">
  <span ng-class="{'disabled': object.status}" ng-click="disableIt(object)">
    {{object.value}}
  </span>
</div>

Le statut est un attribut personnalisé d'objet, vous pouvez le nommer comme vous le souhaitez.
La disabled dans ng-class est un nom de classe CSS, le object.status doit être true ou false

Vous pouvez changer le statut de chaque objet dans la fonction disableIt.
Dans votre contrôleur, vous pouvez faire ceci:

$scope.disableIt = function(obj) {
  obj.status = !obj.status
}
1
zx1986

J'ai eu ce problème aussi et j'ai simplement découvert que si vous supprimez simplement le "#", le problème disparaît. Comme ça :

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