Come rendere condizionale un evento ng-click?

Ho questo codice all'interno di ng-repeat:

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

Come fare a condizione che il pulsante sia disabilitato quando lo è class="disabled"?

O c'è un modo per farlo in Javascript in modo che assomigli a:

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

Non è bene manipolare con DOM (incluso il controllo degli attributi) in qualsiasi posto tranne le direttive. È possibile aggiungere all'ambito un valore che indica se il collegamento deve essere disabilitato.

Ma un altro problema è che ngDisabled non funziona su nulla tranne i controlli del modulo, quindi non puoi usarlo con <a>, ma puoi usarlo con <button> e modellarlo come collegamento.

Un altro modo è usare la valutazione pigra di espressioni come in isDisabled || action()modo che l'azione non venga chiamata se isDisabledè vera.

Ecco entrambe le soluzioni: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Possiamo aggiungere un evento ng-click in modo condizionale senza usare la classe disabilitata.

HTML:

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

Uso l'espressione && che funziona perfettamente per me.

Per esempio,

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

Se vm.slideOneValidè falso, la seconda parte dell'espressione non viene attivata. So che questo sta inserendo la logica nel DOM, ma è un modo rapido e sporco per disabilitare ng e fare clic per posizionarlo correttamente.

Ricorda solo di aggiungere ng-model all'elemento per far funzionare ng-disabled.

Fondamentalmente ng-clickprima controlla il isDisablede in base al suo valore deciderà se la funzione deve essere chiamata o meno.

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

O leggilo come

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

Potresti provare a usare ng-class.
Ecco il mio semplice esempio:
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>

Lo stato è un attributo personalizzato dell'oggetto, puoi chiamarlo come preferisci.
L' disabledin ng-classè un nome di classe CSS, il object.statusdovrebbe essere trueofalse

È possibile modificare lo stato di ogni oggetto in funzione disableIt.
Nel tuo controller, puoi fare questo:

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

Ho avuto anche questo problema e ho semplicemente scoperto che se rimuovi semplicemente il "#" il problema si interrompe. Come questo :

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