Como tornar um evento ng-click condicional?

115

Eu tenho este código dentro de ng-repeat:

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

Como fazer uma condição de que o botão está desabilitado quando está class="disabled"?

Ou existe uma maneira de fazer isso em Javascript para que fique assim:

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

Respostas:

205

Não é bom manipular com DOM (incluindo a verificação de atributos) em qualquer lugar, exceto diretivas. Você pode adicionar ao escopo algum valor indicando se o link deve ser desabilitado.

Mas outro problema é que ngDisabled não funciona em nada exceto em controles de formulário, então você não pode usá-lo com <a>, mas pode usá-lo com <button> e estilizá-lo como um link.

Outra maneira é usar a avaliação preguiçosa de expressões como isDisabled || action()para que a ação não seja chamada se isDisabledfor verdadeira.

Aqui vão as duas soluções: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Valentyn Shybanov
fonte
67
para concluir: ng-click = "isDisabled || action ()" resolveu
Alon
27
melhor: ||deveria ser &&, embora funcione em seu plunk, se isDisabled é um método, os tubos duplos continuam verificando se há uma expressão válida. Este não é o caso com&&
polyclick de
7
@polyclick a lógica também mudaria. se isDisabled retornar true, action () será chamada.
UCJava de
@polyclick: Mas o objetivo é não continuar verificando se desativado. Além disso, em sua versão, se isDisabled()retornar falso, nenhum deles action()será chamado, nem a verificação de "uma expressão válida" continua.
Sebastian Mach,
1
@UCJava, se && for usado, será! IsDisabled (ou isEnabled) então. Pode ser ng-click = "Form. $ Valid && action ()" ou ng-click = "Form. $ Invalid || action ()"
Weihui Guo
47

Podemos adicionar evento ng-click condicionalmente sem usar a classe desativada.

HTML:

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

Eu uso a expressão && que funciona perfeitamente para mim.

Por exemplo,

<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.slideOneValidfor falso, a segunda parte da expressão não é disparada. Eu sei que isso é colocar lógica no DOM, mas é uma maneira rápida e suja de desabilitar o ng e clicar com o ng para posicionar bem.

Apenas lembre-se de adicionar ng-model ao elemento para fazer o ng desativado funcionar.

Nick Res
fonte
4

Basicamente, ng-clickprimeiro verifica o isDisablede com base em seu valor, ele decidirá se a função deve ser chamada ou não.

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

OU leia como

<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>
Principiante
fonte
1

Você pode tentar usar ng-class.
Aqui está meu exemplo simples:
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>

O status é um atributo personalizado do objeto, você pode nomeá-lo como quiser.
O disabledin ng-classé um nome de classe CSS, o object.statusdeve ser trueoufalse

Você pode alterar o status de cada objeto em função disableIt.
Em seu controlador, você pode fazer isso:

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

Eu também tive esse problema e simplesmente descobri que se você simplesmente remover o "#", o problema desaparece. Como isso :

<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>
pollux1er
fonte
hrefnão deve ser usado, use em seu ng-hreflugar.
Felipe Alarcón
3
@Felipe Alarcon ng-hrefsó é necessário quando você precisa calcular o caminho dinamicamente. Se o caminho nunca mudar, tudo hrefbem.
Ravvy