2.5 Directiva ng-disabled

La directiva ng-disabled nos permite habilitar o deshabilitar un elemento de entrada de datos como un <input> un <select> o un <button>.

Lo importante de la directiva es que habilita o deshabilita el elemento en función de cualquier valor del $scope y por lo tanto de nuestro modelo.

En nuestro ejemplo del seguro médico tenemos el campo “Nombre de la alergia”. Este campo solo tiene sentido que esté habilitado cuando el usuario ha marcado que tiene alguna alergia, así que vamos a hacer que solo esté habilitado el <input> del nombre de la alergia cuando el valor $scope.seguro.enfermedades.alergia valga true. Es decir que si marcamos que tenemos alergia , entonces se habilitará el nombre de la alergia y si no marcamos que tenemos alergia se deshabilitará el campo del nombre de la alergia.

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-controller="SeguroController">
    <form>
      <fieldset>
        <legend>Seguro Médico</legend>
          <label for="nif">NIF:</label><input id="nif" name="nif" type="text" ng-model="seguro.nif" /><br>
          <label for="nombre">Nombre:</label><input id="nombre" name="nombre" type="text" ng-model="seguro.nombre" /><br>
          <label for="ape1">1º Apellido:</label><input id="ape1" name="ape1" type="text" ng-model="seguro.ape1" /><br>
          <label for="edad">Edad:</label><input id="edad" name="edad" type="text" ng-model="seguro.edad" /><br>
          <label for="sexo">Sexo:</label><select id="sexo" name="sexo" type="checkbox" ng-model="seguro.sexo" ><option value="">--Elige opcion--</option><option value="H">Hombre</option><option value="M">Mujer</option></select><br>
          <label for="casado">Casado:</label><input id="casado" name="casado" type="checkbox" ng-model="seguro.casado" /><br>
          <label for="numHijos">Nº Hijos:</label><input id="numHijos" name="numHijos" type="text" ng-model="seguro.numHijos" /><br>
          <label for="embarazada">Embarazada:</label><input id="embarazada" name="embarazada" type="checkbox" ng-model="seguro.embarazada" /><br>
          <label for="fechaCreacion">Fecha de creaci&oacute;n:</label><input id="fechaCreacion" name="fechaCreacion" type="text" ng-model="seguro.fechaCreacion" /><br>
      </fieldset>
      <fieldset>
        <legend>Coberturas</legend>
          <label for="oftalmologia">Oftalmologia:</label><input id="oftalmologia" name="oftalmologia" type="checkbox" ng-model="seguro.coberturas.oftalmologia" /><br>
          <label for="dental">Dental:</label><input id="dental" name="dental" type="checkbox" ng-model="seguro.coberturas.dental" /><br>
          <label for="fecundacionInVitro">Fecundacion In Vitro:</label><input id="fecundacionInVitro" name="fecundacionInVitro" type="checkbox" ng-model="seguro.coberturas.fecundacionInVitro" /><br>
      </fieldset>      
      <fieldset>
      <legend>Enfermedades</legend>
          <label for="corazon">Corazon:</label><input id="corazon" name="corazon" type="checkbox" ng-model="seguro.enfermedades.corazon" /><br>
          <label for="estomacal">Estomacal:</label><input id="estomacal" name="estomacal" type="checkbox" ng-model="seguro.enfermedades.estomacal" /><br>
          <label for="rinyones">Ri&ntilde;ones:</label><input id="rinyones" name="rinyones" type="checkbox" ng-model="seguro.enfermedades.rinyones" /><br>
          <label for="alergia">Alergia:</label><input id="alergia" name="alergia" type="checkbox" ng-model="seguro.enfermedades.alergia" /><br>
          <label for="nombreAlergia">Nombre de la alergia:</label><input ng-disabled="seguro.enfermedades.alergia===false" id="nombreAlergia" name="nombreAlergia" type="text" ng-model="seguro.enfermedades.nombreAlergia" /><br>
      </fieldset> 
    </form>
  </body>
</html>

Línea 33: Se puede ver como hemos incluido la directiva ng-disabled. Su valor es la expresión en JavaScript seguro.enfermedades.alergia===false. En caso de que la anterior expresión sea verdadera se deshabilitará el <input>.

var app=angular.module("app",[]);
 
function SeguroController($scope) {
  $scope.seguro={
    nif:"",
    nombre:"",
    ape1:"",
    edad:undefined,
    sexo:"",
    casado:false,
    numHijos:undefined,
    embarazada:false,
    coberturas: {
      oftalmologia:false,
      dental:false,
      fecundacionInVitro:false
    },
    enfermedades:{
      corazon:false,
      estomacal:false,
      rinyones:false,
      alergia:false,
      nombreAlergia:""
    },
    fechaCreacion:new Date()
  }
}

El fichero script.js no se ha modificado desde el ejemplo anterior.

Expresión de la directiva

Hemos visto en el ejemplo anterior que en ng-disabled se ha usado la expresión seguro.enfermedades.alergia===false. Pero, ¿que se puede poner realmente como valor del atributo?. La respuesta sencilla es que se puede poner cualquier expresión JavaScript pero se evaluará referida al $scope.

Ejemplos de expresiones usando nuestro modelo podrían ser:

seguro.edad>15

seguro.nif===null || seguro.nif===""

seguro.nombre==="Carlos"

seguro.sexo==="H" && sexo.embarazada===true

Llamando a Funciones

También podemos llamar a funciones si creamos dicha función en el $scope.

Por ejemplo si definimos la siguiente función:

$scope.disabledNombreAlergia=function() {
  return (seguro.enfermedades.alergia===false)
}

Y ahora el valor de la directiva quedaría de la siguiente forma:

<input ng-disabled="disabledNombreAlergia()" id="nombreAlergia" name="nombreAlergia" type="text" ng-model="seguro.enfermedades.nombreAlergia" />

Funciones con parámetros

Podemos pensar que son las típicas expresiones booleanas de un if en JavaScript. Realmente no son expresiones de JavaScript sino un subconjunto de él y que AngularJS directamente interpreta. Una referencia completa de que se puede poner como expresión la tenemos en angular_expressions_cheatsheet.pdf

Ejemplo

Referencias

ngDisabled

unidades/02_angular/05_ngdisabled.1405248573.txt.gz · Última modificación: 2014/07/13 12:49 por admin

Ir hasta arriba