La directiva ng-repeat básicamente nos sirve para generar un bucle (parecido a un bucle de java o C#).
<!DOCTYPE html>
<html lang="es">
<head>
<title>Filtrar datos</title>
<script src="angular.min.js"></script>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function ($scope) {
$scope.scopeAlumno
= {
pNom: "SEGUNDO HADSON",
pApe: "PAREDES CORDOVA",
pPens: 1230,
/*Definir
Array*/
mCursos: [
{ curso: 'Diseño de Proceso', cod:
70 },
{ curso: 'Ingenieria de Requerimiento', cod: 80 },
{ curso: 'Gestión de Proyecto', cod:
65 }
],
pNomApe: function () {/*Función para concatenar los valores pNom y pApe*/
var pObjAlumno;
pObjAlumno = $scope.scopeAlumno;
return pObjAlumno.pNom + "
" + pObjAlumno.pApe;
}
};
});
</script>
</head>
<body>
<h3>Ahora construiremos una matriz y haremos uso de filter,
uppercase, lowercase</h3>
<h5>filter : filtrar datos de la matriz<br>
uppercase : converte los datos en
mayusculas<br>
lowercase : converte los datos en
minuscula<br>
ng-repeat : directiva que nos permite
listar los datos de la matriz</h5>
<div ng-app="mainApp" ng-controller="studentController">
<hr>
<table border="0">
<tr align=center><td collapse=3>INGRESAR DATOS</td></tr>
<tr><td>Nombres:</td><td><input type="text" ng-model="scopeAlumno.pNom"></td></tr>
<tr><td>Apellidos: </td><td><input type="text" ng-model="scopeAlumno.pApe"></td></tr>
<tr><td>Pension: </td><td><input type="text" ng-model="scopeAlumno.pPens"></td></tr>
</table>
<hr>
<br/>
<table border="0">
<!--Aplicar
uppercase (mayusculas) y lowercase (minuscula) en la expresion-->
<tr><td>DATOS MAYUSCULA : </td><td>{{scopeAlumno.pNomApe() | uppercase}}</td></tr>
<tr><td>datos minuscula : </td><td>{{scopeAlumno.pNomApe() | lowercase}}</td></tr>
<!--Aplicar
currency para el tipo de dato moneda por default está con tipo dolar - así que
para poder modificar aplicamos el
currency:"S/." (después de los dos puntos antepone que usaremos algún tipo de moneda
definido)-->
<tr><td>PENSION: </td><td>{{scopeAlumno.pPens | currency:"S/."}}</td></tr>
<tr><td><b>Filtrar datos: </b></td><td><input type="text" ng-model="mCursos"></td></tr>
<tr><td>Cursos:</td><td>
<ul>
<!--Para listar los cursos se hace uso de la directiva
ng-repeat (la funcionalidad es parecido al de un bucle) y uso del filtro
incorporado y ordenamos por código.-->
<li ng-repeat="subject in scopeAlumno.mCursos | filter: mCursos
|orderBy:'cod'">
{{ subject.curso + ', código: ' + subject.cod }}
</li>
</ul>
</td></tr>
</table>
</div>
</body>
</html>
Imagen - Tiempo de ejecución
Nos vemos en el siguiente apartado ;)
0 Comentarios