unidades:08_formularios:04_ejemploseguro

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js'></script>
  <script src="//code.angularjs.org/1.2.19/i18n/angular-locale_es-es.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

  <ng-include src="'cabecera.html'"></ng-include>

  <div ng-view></div>

  <ng-include src="'pie.html'"></ng-include>
</body>

</html>

var app = angular.module("app", ['ngRoute']);

function RemoteResource($http,$q, baseUrl) {
  this.get = function(idSeguro) {
    var defered=$q.defer();
    var promise=defered.promise;
    
    $http({
      method: 'GET',
      url: baseUrl + '/datos' + idSeguro + '.json'
    }).success(function(data, status, headers, config) {
      defered.resolve(data);
    }).error(function(data, status, headers, config) {
      defered.reject(status);
    });
    
    return promise;
    
  }
  this.list = function() {
    var defered=$q.defer();
    var promise=defered.promise;    
    
    $http({
      method: 'GET',
      url: baseUrl + '/listado_seguros.json'
    }).success(function(data, status, headers, config) {
      defered.resolve(data);
    }).error(function(data, status, headers, config) {
      defered.reject(status);
    });
    
    
    return promise;
  }
}

function RemoteResourceProvider() {
  var _baseUrl;
  this.setBaseUrl = function(baseUrl) {
    _baseUrl = baseUrl;
  }
  this.$get = ['$http','$q',function($http,$q) {
      return new RemoteResource($http,$q, _baseUrl);
  }];
}

app.provider("remoteResource", RemoteResourceProvider);


app.constant("baseUrl", ".");
app.config(['baseUrl', 'remoteResourceProvider',
  function(baseUrl, remoteResourceProvider) {
    remoteResourceProvider.setBaseUrl(baseUrl);
  }
]);

app.value("urlLogo", "http://www.cursoangularjs.es/lib/exe/fetch.php?cache=&media=unidades:04_masdirectivas:medical14.png");
app.run(["$rootScope", "urlLogo",function($rootScope, urlLogo) {
    $rootScope.urlLogo = urlLogo;
}]);


app.filter("filteri18n",["$filter",function($filter) {
  var filterFn=$filter("filter");
   
  /** Transforma el texto quitando todos los acentos diéresis, etc. **/
  function normalize(texto) {
    texto = texto.replace(/[áàäâ]/g, "a");
    texto = texto.replace(/[éèëê]/g, "e");
    texto = texto.replace(/[íìïî]/g, "i");
    texto = texto.replace(/[óòôö]/g, "o");
    texto = texto.replace(/[úùüü]/g, "u");
    texto = texto.toUpperCase();
    return texto;
  }
    
  /** Esta función es el comparator en el filter **/
  function comparator(actual, expected) {
      if (normalize(actual).indexOf(normalize(expected))>=0) {
        return true;
      } else {
        return false;
      }
  }
   
  /** Este es realmente el filtro **/
  function filteri18n(array,expression) {
    //Lo único que hace es llamar al filter original pero pasado
    //la nueva función de comparator
    return filterFn(array,expression,comparator)
  }
   
  return filteri18n;
   
}]);


app.config(['$routeProvider',function($routeProvider) {
 
  $routeProvider.when('/', {
    templateUrl: "main.html",
    controller: "MainController"
  }); 
 
  $routeProvider.when('/seguro/listado', {
    templateUrl: "listado.html",
    controller: "ListadoSeguroController",
    resolve: {
      seguros:['remoteResource',function(remoteResource) {
        return remoteResource.list();
      }]
    }
  });
     
  $routeProvider.when('/seguro/edit/:idSeguro', {
    templateUrl: "detalle.html",
    controller: "DetalleSeguroController",
    resolve: {
      seguro:['remoteResource','$route',function(remoteResource,$route) {
        return remoteResource.get($route.current.params.idSeguro);
      }]
    }
  });
   
  $routeProvider.otherwise({
        redirectTo: '/'
  });   
 
}]);
 

app.controller("DetalleSeguroController", ['$scope', 'seguro',function($scope, seguro) {

    $scope.filtro = {
      ape1: ""
    }

    $scope.sexos = [{
      codSexo: "H",
      descripcion: "Hombre"
    }, {
      codSexo: "M",
      descripcion: "Mujer"
    }];


    $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()
    }

    $scope.seguro = seguro;


  $scope.guardar=function() {
    if ($scope.form.$valid) {
      alert("Los datos aqui se habrían enviado al servidor  y estarían validados en la parte cliente");
    }else {
      alert("Hay datos inválidos");
    }
  }

}]);

app.controller("ListadoSeguroController", ['$scope', 'seguros',function($scope, seguros) {
    $scope.seguros = seguros;
}]);

app.controller("MainController", ['$scope',function($scope) {

}]);

Ejemplo de formulario

[{
  "idSeguro": 1,
  "nif": "12345678Z",
  "nombre": "Carlos",
  "ape1": "Cano",
  "edad": 41,
  "sexo": "H",
  "casado": true,
  "numHijos": 3,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": false,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": true,
    "estomacal": false,
    "rinyones": false,
    "alergia": true,
    "nombreAlergia": "Acaros"
  }
}, {
  "idSeguro": 2,
  "nif": "34783627Z",
  "nombre": "Catalina",
  "ape1": "López",
  "edad": 33,
  "sexo": "M",
  "casado": true,
  "numHijos": 1,
  "embarazada": true,
  "coberturas": {
    "oftalmologia": false,
    "dental": false,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": false,
    "estomacal": false,
    "rinyones": false,
    "alergia": false,
    "nombreAlergia": ""
  }
}, {
  "idSeguro": 3,
  "nif": "29069345J",
  "nombre": "Jose",
  "ape1": "Aguado",
  "edad": 56,
  "sexo": "H",
  "casado": true,
  "numHijos": 2,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": true,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": true,
    "estomacal": true,
    "rinyones": true,
    "alergia": false,
    "nombreAlergia": ""
  }
}, {
  "idSeguro": 4,
  "nif": "34828938S",
  "nombre": "Angel",
  "ape1": "Navarro",
  "edad": 21,
  "sexo": "H",
  "casado": false,
  "numHijos": 0,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": true,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": false,
    "estomacal": false,
    "rinyones": false,
    "alergia": true,
    "nombreAlergia": "Graminias"
  }
}, {
  "idSeguro": 5,
  "nif": "23236773B",
  "nombre": "Teresa",
  "ape1": "Rubio",
  "edad": 36,
  "sexo": "M",
  "casado": false,
  "numHijos": 0,
  "embarazada": true,
  "coberturas": {
    "oftalmologia": false,
    "dental": false,
    "fecundacionInVitro": true
  },
  "enfermedades": {
    "corazon": false,
    "estomacal": false,
    "rinyones": false,
    "alergia": false,
    "nombreAlergia": ""
  }
}, {
  "idSeguro": 6,
  "nif": "27469252F",
  "nombre": "Alfredo",
  "ape1": "Padilla",
  "edad": 45,
  "sexo": "H",
  "casado": true,
  "numHijos": 2,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": true,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": true,
    "estomacal": false,
    "rinyones": false,
    "alergia": false,
    "nombreAlergia": ""
  }
}, {
  "idSeguro": 7,
  "nif": "34804406R",
  "nombre": "Rosa",
  "ape1": "Muñoz",
  "edad": 45,
  "sexo": "M",
  "casado": true,
  "numHijos": 3,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": false,
    "dental": false,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": false,
    "estomacal": false,
    "rinyones": false,
    "alergia": false,
    "nombreAlergia": ""
  }
}, {
  "idSeguro": 8,
  "nif": "23244114S",
  "nombre": "Alejandro",
  "ape1": "Valeno",
  "edad": 19,
  "sexo": "H",
  "casado": false,
  "numHijos": 0,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": false,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": false,
    "estomacal": false,
    "rinyones": false,
    "alergia": true,
    "nombreAlergia": "Leche"
  }
}]

<div>
  <!-- <div>Icon made by <a href="http://www.freepik.com" alt="Freepik.com" title="Freepik.com">Freepik</a> from <a href="http://www.flaticon.com/free-icon/medical-stethoscope-variant_27164" title="Flaticon">www.flaticon.com</a></div> -->
  <h1><a href="#/"><img ng-src="{{urlLogo}}" /></a> Seguro medico</h1>
</div>

<div>&copy; Seguros medicos S.A.</div>


Filtrar por apellido:<input ng-model="filtro.ape1" >

<table>
  <thead>
    <tr>
      <th>NIF</th>
      <th>Nombre</th>
      <th>Apellido</th>
      <th>Sexo</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="3">El Nº de seguros medicos es:</td>
      <td ng-bind="seguros.length"></td>
    </tr>
  </tfoot>
  <tbody>
    <tr ng-repeat="seguro in seguros| filteri18n:{ape1:filtro.ape1}" ng-style="{color:($odd?'red':'green')}">
      <td><a ng-href="#/seguro/edit/{{seguro.idSeguro}}">{{seguro.nif}}</a></td>
      <td>{{seguro.nombre}}</td>
      <td>{{seguro.ape1}}</td>
      <td ng-switch on="seguro.sexo">
        <span ng-switch-when="H">Hombre</span>
        <span ng-switch-when="M">Mujer</span>
        <span ng-switch-when=""></span>
        <span ng-switch-default>Desconocido</span>
      </td>
    </tr>
  </tbody>
</table>

<a href="#/seguro/listado">Volver</a>
<form name="form" novalidate>
  <fieldset>
    <legend>Seguro Médico</legend>
      <label for="nif">NIF:</label><input id="nif" name="nif" type="text" ng-model="seguro.nif" required ng-pattern="/(^[X-Z]\d{7}[A-Z]$)|(^\d{8}[A-Z]$)/" />
      <span ng-show="form.nif.$error.required && form.nif.$dirty">El campo es requerido</span>
      <span ng-show="form.nif.$error.pattern">No cumple la expresi&oacute;n regular</span>
      <br>
      <label for="nombre">Nombre:</label><input id="nombre" name="nombre" type="text" ng-model="seguro.nombre" required />
      <span ng-show="form.nombre.$error.required && form.nombre.$dirty">El campo es requerido</span>
      <br>
      <label for="ape1">1º Apellido:</label><input id="ape1" name="ape1" type="text" ng-model="seguro.ape1" required />
      <span ng-show="form.ape1.$error.required && form.ape1.$dirty">El campo es requerido</span>
      <br>
      <label for="edad">Edad:</label><input id="edad" name="edad" type="number" ng-model="seguro.edad" required min="18" max="120" />
      <span ng-show="form.edad.$error.required && form.edad.$dirty">El campo es requerido</span>
      <span ng-show="form.edad.$error.number">No es un n&uacute;mero</span>
      <span ng-show="form.edad.$error.min">La edad m&iacute;nima es de 18 a&ntilde;os</span>
      <span ng-show="form.edad.$error.max">La edad máxima es de 120 a&ntilde;os</span>      
      <br>
      <label for="sexo">Sexo:</label><select id="sexo" name="sexo" type="checkbox" ng-model="seguro.sexo" ng-options="sexo.codSexo as sexo.descripcion for sexo in sexos" required ><option value="">--Elige opcion--</option></select>
      <span ng-show="form.sexo.$error.required && form.sexo.$dirty">El campo es requerido</span>
      <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 ng-show="seguro.sexo==='M'" for="fecundacionInVitro">Fecundacion In Vitro:</label><input ng-show="seguro.sexo==='M'" 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> 
  
  <button ng-click="guardar()" ng-disabled="form.$invalid">Guardar</button>
  
</form>

<a href="#/seguro/listado">Volver</a>

{
  "idSeguro": 1,
  "nif": "12345678Z",
  "nombre": "Carlos",
  "ape1": "Cano",
  "edad": 41,
  "sexo": "H",
  "casado": true,
  "numHijos": 3,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": false,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": true,
    "estomacal": false,
    "rinyones": false,
    "alergia": true,
    "nombreAlergia": "Acaros"
  }
}

{
  "idSeguro": 2,
  "nif": "34783627Z",
  "nombre": "Catalina",
  "ape1": "López",
  "edad": 33,
  "sexo": "M",
  "casado": true,
  "numHijos": 1,
  "embarazada": true,
  "coberturas": {
    "oftalmologia": false,
    "dental": false,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": false,
    "estomacal": false,
    "rinyones": false,
    "alergia": false,
    "nombreAlergia": ""
  }
}

{
  "idSeguro": 3,
  "nif": "29069345J",
  "nombre": "Jose",
  "ape1": "Aguado",
  "edad": 56,
  "sexo": "H",
  "casado": true,
  "numHijos": 2,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": true,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": true,
    "estomacal": true,
    "rinyones": true,
    "alergia": false,
    "nombreAlergia": ""
  }
}

{
  "idSeguro": 4,
  "nif": "34828938S",
  "nombre": "Angel",
  "ape1": "Navarro",
  "edad": 21,
  "sexo": "H",
  "casado": false,
  "numHijos": 0,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": true,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": false,
    "estomacal": false,
    "rinyones": false,
    "alergia": true,
    "nombreAlergia": "Graminias"
  }
}

{
  "idSeguro": 5,
  "nif": "23236773B",
  "nombre": "Teresa",
  "ape1": "Rubio",
  "edad": 36,
  "sexo": "M",
  "casado": false,
  "numHijos": 0,
  "embarazada": true,
  "coberturas": {
    "oftalmologia": false,
    "dental": false,
    "fecundacionInVitro": true
  },
  "enfermedades": {
    "corazon": false,
    "estomacal": false,
    "rinyones": false,
    "alergia": false,
    "nombreAlergia": ""
  }
}

{
  "idSeguro": 6,
  "nif": "27469252F",
  "nombre": "Alfredo",
  "ape1": "Padilla",
  "edad": 45,
  "sexo": "H",
  "casado": true,
  "numHijos": 2,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": true,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": true,
    "estomacal": false,
    "rinyones": false,
    "alergia": false,
    "nombreAlergia": ""
  }
}

{
  "idSeguro": 7,
  "nif": "34804406R",
  "nombre": "Rosa",
  "ape1": "Muñoz",
  "edad": 45,
  "sexo": "M",
  "casado": true,
  "numHijos": 3,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": false,
    "dental": false,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": false,
    "estomacal": false,
    "rinyones": false,
    "alergia": false,
    "nombreAlergia": ""
  }
}

{
  "idSeguro": 8,
  "nif": "23244114S",
  "nombre": "Alejandro",
  "ape1": "Valeno",
  "edad": 19,
  "sexo": "H",
  "casado": false,
  "numHijos": 0,
  "embarazada": false,
  "coberturas": {
    "oftalmologia": true,
    "dental": false,
    "fecundacionInVitro": false
  },
  "enfermedades": {
    "corazon": false,
    "estomacal": false,
    "rinyones": false,
    "alergia": true,
    "nombreAlergia": "Leche"
  }
}

<a href="#/seguro/listado" >Listado de seguros medicos</a>

.ng-invalid {
  border-color: red;
}