Quiero que se desactiven dos enlaces al presionar un botón. Quise usar la directiva ng-disabled
pero no funciona para enlaces, sólo en botones.
algo como esto.
-
1Hola Gustavo. Bienvenido a SO en español. Podrías editar la pregunta y agregarle lo que has intentado hasta ahora. Puede que yo sepa cual es tu problema pero con detalles tan escasos es difícil saberlo con seguridad.– devconceptCommented el 22 jun. 2016 a las 15:49
2 respuestas
No aplica el disable para el link porque no tiene esta funcionalidad, para los link usas estilos.
angular.module('ngApp', []).controller('ngCtrl',['$scope', function($scope){
$scope.state = '';
$scope.Disable = function(){
$scope.state = 'disable';
};
$scope.IsDisable = function(){
return $scope.state == 'disable';
};
}])
.disabled {
cursor: not-allowed;
pointer-events: none;
color: grey;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="ngApp">
<div ng-controller="ngCtrl">
<div>
<button ng-click="Disable()">Disable</button><br/>
<a href="http://www.google.com" ng-class="{disabled: IsDisable()}">link google</a>
</body>
</html>
-
-
otra como cual ? cada elemento del html se trabaja con sus atributos si el disable no es valido para el link entonces se aplican los que este contempla, en este caso serian estilos Commented el 22 jun. 2016 a las 16:58
-
El problema aquí es que ng-disabled
existe para modificar el atributo disabled
. Dicho atributo es válido para los elementos <select>
, <option>
, <input>
, <button>
, <optgroup>
, <textarea>
, <fieldset>
y <menuitem>
. Hay otros que tienen ese atributo también pero son obsoletos o no recomendados por eso no los menciono.
Esta directiva es necesaria ya que disabled
es un attributo HTML booleano por lo que si intentas interpolarlo el HTML lo interpretará como que su valor es true. Ej:
<button disabled="{{habilitar}}">
En el caso anterior el botón siempre estará desabilitado sin importar el valor de $scope.habilitar
.
Los enlaces <a>
no tienen dicho atributo por lo que debes suplir esa funcionalidad con clases
.disabled {
/* para evitar que el click y otros eventos funcione en el elemento*/
pointer-events: none;
/* para simular el estado desabilitado */
background-color: lightgray;
}
Luego te queda aplicar la clase condicionalmente lo que lo puedes lograr con ng-class
angular.module('app', [])
.controller('MyCtrl', function($scope) {
$scope.isDisabled = true;
$scope.doClick = function() {
alert('hiciste click');
}
});
.disabled {
/* para evitar que el click y otros eventos funcione en el elemento*/
pointer-events: none;
/* para simular el estado desabilitado */
background-color: lightgray;
/* Para que parezca un boton*/
padding: 1px 6px;
color: gray;
border: lightgray solid 1px;
}
/* Para que parezca un boton*/
a {
cursor: pointer;
padding: 1px 6px;
border: lightgray solid 1px;
}
button: {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div>
<label>Desabilitado</label>
<input type="checkbox" ng-model="isDisabled">
</div>
<button ng-disabled="isDisabled" ng-click="doClick()">Boton</button>
<a ng-class="{'disabled': isDisabled}" ng-click="doClick()">Enlace</a>
<small>Haz click en los botones</small>
</div>