Ticker

6/recent/ticker-posts

Ejemplo AngularJS - Test 02

Ahora implementaremos un pequeño ejemplo que nos permite filtrar datos desde una matriz haciendo uso de la directiva ng-repeat y el servicio filter, independientemente de la funciones uppercase y lowercase.

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 ;)

Publicar un comentario

0 Comentarios