<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<ng-include src="'cabecera.html'"></ng-include>
<a href="listado.html" >Listado de seguros medicos</a>
<br>
<a href="detalle.html" >detalle de seguros medicos</a>
<ng-include src="'pie.html'"></ng-include>
</body>
</html>
var app = angular.module("app", []);
function RemoteResource($http, baseUrl) {
this.get = function(fnOK, fnError) {
$http({
method: 'GET',
url: baseUrl + '/datos.json'
}).success(function(data, status, headers, config) {
fnOK(data);
}).error(function(data, status, headers, config) {
fnError(data, status);
});
}
this.list = function(fnOK, fnError) {
$http({
method: 'GET',
url: baseUrl + '/listado_seguros.json'
}).success(function(data, status, headers, config) {
fnOK(data);
}).error(function(data, status, headers, config) {
fnError(data, status);
});
}
}
function RemoteResourceProvider() {
var _baseUrl;
this.setBaseUrl = function(baseUrl) {
_baseUrl = baseUrl;
}
this.$get = ['$http',
function($http) {
return new RemoteResource($http, _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.controller("DetalleSeguroController", ['$scope', 'remoteResource',function($scope, remoteResource) {
$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()
}
remoteResource.get(function(seguro) {
$scope.seguro = seguro;
}, function(data, status) {
alert("Ha fallado la petición. Estado HTTP:" + status);
});
}]);
app.controller("ListadoSeguroController", ['$scope', 'remoteResource',function($scope, remoteResource) {
$scope.seguros = [];
remoteResource.list(function(seguros) {
$scope.seguros = seguros;
}, function(data, status) {
alert("Ha fallado la petición. Estado HTTP:" + status);
});
}]);
app.controller("MainController", ['$scope',function($scope) {
}]);
Ejemplo de mas directivas en el seguro médico
{
"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"
}
}
[{
"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"
}
}, {
"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": ""
}
}, {
"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": ""
}
}, {
"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"
}
}, {
"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": ""
}
}, {
"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": ""
}
}, {
"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": ""
}
}, {
"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><img ng-src="{{urlLogo}}" /> Seguro medico</h1>
</div>
<div>© Seguros medicos S.A.</div>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="ListadoSeguroController">
Filtrar por apellido:<input ng-model="filtro.ape1" >
<ng-include src="'cabecera.html'"></ng-include>
<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="./seguros/edit/{{seguro.nif}}">{{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>
<ng-include src="'pie.html'"></ng-include>
</body>
</html>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="DetalleSeguroController">
<ng-include src="'cabecera.html'" ></ng-include>
<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" ng-options="sexo.codSexo as sexo.descripcion for sexo in sexos" ><option value="">--Elige opcion--</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ó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ñ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>
<ng-include src="'pie.html'" ></ng-include>
</body>
</html>