¿Cómo convertir un evento ng-click en condicional?

115

Tengo este código dentro de ng-repeat:

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

¿Cómo hacer una condición para que el botón esté desactivado cuando lo ha hecho class="disabled"?

¿O hay alguna manera de hacerlo en Javascript para que se vea así:

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

Respuestas:

205

No es bueno manipular con DOM (incluida la verificación de atributos) en ningún lugar excepto en las directivas. Puede agregar al alcance algún valor que indique si el enlace debe estar deshabilitado.

Pero otro problema es que ngDisabled no funciona en nada excepto en los controles de formulario, por lo que no puede usarlo con <a>, pero puede usarlo con <button> y diseñarlo como enlace.

Otra forma es usar la evaluación perezosa de expresiones como isDisabled || action()para que la acción no se llame si isDisabledes verdadera.

Aquí van ambas soluciones: http://plnkr.co/edit/5d5R5KfD4PCE8vS3OSSx?p=preview

Valentyn Shybanov
fuente
67
para concluir: ng-click = "isDisabled || action ()" hizo el truco
Alon
27
mejor: ||debería ser &&, aunque funciona en su plunk, si isDisabled es un método, los tubos dobles siguen buscando una expresión válida. Este no es el caso con&&
polyclick
7
@polyclick, la lógica también cambiaría. si isDisabled devuelve verdadero, entonces se llamaría a la acción ().
UCJava
@polyclick: Pero el punto es no continuar verificando si está deshabilitado. Además, en su versión, si isDisabled()devuelve falso, no se action()llamará ni continuará la comprobación de "una expresión válida".
Sebastian Mach
1
@UCJava, si se usa &&, entonces será! IsDisabled (o isEnabled). Es ng-click = "Form. $ Valid && action ()" o ng-click = "Form. $
Invalid
47

Podemos agregar el evento ng-click condicionalmente sin usar la clase deshabilitada.

HTML:

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

Utilizo la expresión && que funciona perfectamente para mí.

Por ejemplo,

<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.slideOneValides falso, la segunda parte de la expresión no se dispara. Sé que esto está poniendo lógica en el DOM, pero es una forma rápida y sucia de hacer ng-disabled y ng-click para colocar bien.

Solo recuerde agregar ng-model al elemento para que ng-disabled funcione.

Nick Res
fuente
4

Básicamente, ng-clickprimero verifica el isDisabledy, basándose en su valor, decidirá si la función debe llamarse o no.

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

O léelo 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
fuente
1

Podrías intentar usar ng-class.
Aquí está mi ejemplo 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>

El estado es un atributo personalizado del objeto, puede nombrarlo como desee.
El disabledin ng-classes un nombre de clase CSS, object.statusdebe ser trueofalse

Puede cambiar el estado de cada objeto en función disableIt.
En su controlador, puede hacer esto:

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

También tuve este problema y simplemente descubrí que si simplemente quita el "#", el problema desaparece. Me gusta esto :

<a href="" class="disabled" ng-click="doSomething(object)">Do something</a>
pollux1er
fuente
hrefno debe usarse, use ng-hrefen su lugar.
Felipe Alarcon
3
@Felipe Alarcon ng-hrefsolo es necesario cuando necesitas calcular la ruta de forma dinámica. Si el camino nunca cambia, hrefestá bien.
Ravvy