Comment faire une condition sur ng-click dans AngularJS

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 pour que le bouton soit désactivé s'il a une class="disabled" .

Comment puis-je créer la condition dans le HTML en utilisant la classe,

Ou y at-il un moyen de le faire dans le javascript qui ressemblera à:

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

Il n'est pas judicieux de manipuler avec DOM (y compris la vérification des attributs) dans n'importe quel lieu, sauf les directives. Vous pouvez ajouter à la portée une valeur indiquant si la liaison doit être désactivée.

Mais un autre problème est que ngDisabled ne fonctionne pas sur n'importe quoi sauf les contrôles de formulaire, donc vous ne pouvez pas l'utiliser avec <a>, mais vous pouvez l'utiliser avec <bouton> et le définir comme lien.

Une autre façon est d'utiliser l'évaluation paresseuse d'expressions comme isDisabled || action() isDisabled || action() afin que l'action ne soit pas appelée si isDisabled est vrai.

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

Nous pouvons ajouter l'événement ng-click conditionnellement sans utiliser de classe désactivée.

HTML:

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

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 la logique dans les DOM, mais c'est une façon rapide et sale d'obtenir ng-disabled et ng-click pour placer agréable.

N'oubliez pas d'ajouter ng-model à l'élément pour rendre le travail ng-disabled.

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é de l'objet, vous pouvez le nommer comme vous le souhaitez.
L' disabled dans ng-class est un nom de classe CSS, l' object.status doit être true ou false

Vous pouvez modifier l'état de chaque objet dans la fonction disableIt .
Dans votre contrôleur, vous pouvez le faire:

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

J'ai également eu ce problème et j'ai simplement découvert que si vous supprimez simplement le "#", le problème se déroule. Comme ça :

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