Wie kann ein ng-click-Ereignis an Bedingungen geknüpft werden?

Ich habe diesen Code in ng-repeat:

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

Wie kann eine Bedingung festgelegt werden, dass die Schaltfläche deaktiviert ist, wenn dies der Fall ist class="disabled"?

Oder gibt es eine Möglichkeit, dies in Javascript zu tun, damit es so aussieht:

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

Es ist nicht gut, mit DOM (einschließlich der Überprüfung von Attributen) an einem anderen Ort als Direktiven zu manipulieren. Sie können dem Bereich einen Wert hinzufügen, der angibt, ob die Verknüpfung deaktiviert werden soll.

Ein weiteres Problem ist, dass ngDisabled nur mit Formularsteuerelementen funktioniert. Sie können es also nicht mit <a> verwenden, sondern mit <button> und als Link formatieren.

Eine andere Möglichkeit besteht darin, Ausdrücke wie diese faul auszuwerten, isDisabled || action()damit die Aktion nicht aufgerufen wird, wenn sie isDisabledwahr ist.

Hier sind beide Lösungen: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Wir können ng-click-Ereignisse bedingt hinzufügen, ohne die deaktivierte Klasse zu verwenden.

HTML:

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

Ich benutze den && Ausdruck, der perfekt für mich funktioniert.

Beispielsweise,

<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>

Wenn vm.slideOneValidfalse ist, wird der zweite Teil des Ausdrucks nicht ausgelöst. Ich weiß, dass dies Logik in das DOM einfügt, aber es ist ein schneller und schmutziger Weg, um ng zu deaktivieren und ng-click zu platzieren, um nett zu platzieren.

Denken Sie daran, dem Element ein ng-Modell hinzuzufügen, damit ng-deaktiviert funktioniert.

Grundsätzlich wird ng-clickzuerst überprüft isDisabledund anhand des Werts entschieden, ob die Funktion aufgerufen werden soll oder nicht.

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

ODER lesen Sie es als

<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>

Sie könnten versuchen, zu verwenden ng-class.
Hier ist mein einfaches Beispiel:
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>

Der Status ist ein benutzerdefiniertes Attribut des Objekts. Sie können es beliebig benennen.
Das disabledin ng-classist ein CSS-Klassenname, das object.statussollte trueoder seinfalse

Sie können den Funktionsstatus jedes Objekts ändern disableIt.
In Ihrem Controller können Sie Folgendes tun:

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

Ich hatte auch dieses Problem und habe einfach herausgefunden, dass das Problem behoben ist, wenn Sie einfach das "#" entfernen. So was :

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