Los filtros se utilizan para cambiar los datos modificados y se pueden clasificar en expresiones o usar directivas de caracteres de tubería. A continuación se muestra una lista de filtros de uso común.
| S.No. | nombre | describir |
|---|---|---|
| 1 | capital | Convierta el texto en texto en mayúsculas. |
| 2 | minúscula | Convierta el texto en texto en minúsculas. |
| 3 | divisa | Texto de formato de moneda. |
| 4 | Filtrar | Filtrar una matriz de subconjuntos Se basa en los criterios proporcionados. |
| 5 | Clasificar | Sort proporciona matrices básicas estándar. |
Filtro de tapas
Agregue filtros mayúsculas para usar expresiones de caracteres de tubería. Aquí, se agregan filtros de capital y los nombres de los estudiantes se imprimen en letras mayúsculas.
Ingrese el nombre del primer: <input type = "text" ng-model = "student.firstname"> Ingrese apellido: <input type = "text" ng-model = "student.lastName"> Nombre en el caso superior: {{student.fullName () | mayúscula}}Filtro minúscula
Agregue filtros en minúsculas, utilizando expresiones de caracteres de tubería. Agregue un filtro minúscula aquí para imprimir nombres de estudiantes en letras minúsculas.
Ingrese el nombre del primer: <input type = "text" ng-model = "student.firstname"> Ingrese apellido: <input type = "text" ng-model = "student.lastName"> Nombre en el caso superior: {{student.fullName () | minúsculas}}Filtro de divisas
El filtro de dólar canadiense usa un carácter de tubería para devolver la expresión del número. Aquí hemos agregado filtros a la tarifa de impresión de moneda utilizando el formato de divisas.
Ingrese las tarifas: <input type = "text" ng-model = "student.fees"> tarifas: {{student.fees | divisa}}Filtros para filtros
Para mostrar solo los temas deseados, usamos temasname como filtro.
Ingrese sujeto: <input type = "text" ng-model = "temasname"> asunto: <ul> <li ng-depreat = "asunto en student.subjects | filtre: temasname"> {{temas.name + ', marks:' + temas.marks}} </li> </ul>Filtro de clasificación
Para ordenar temas por etiquetas, usamos las etiquetas de pedido.
Asunto: <ul> <li ng-repeat = "sujeto en student.subjects | Orderby: 'Marks'"> {{Sujem.name + ', Marks:' + Sujem.marks}} </li> </ul>ejemplo
Los siguientes ejemplos mostrarán todos los filtros mencionados anteriormente.
testangularjs.html
<html> <fead> <title> Angular JS filtros </title> </head> <body> <h2> Angularjs Aplicación de muestra </h2> <div Ng-app = "" ng-confontroller = "studentController"> <table> <tr> <td> Introd ng-model="student.firstName"></td></tr><tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr><td>Enter fees: </td><td><input type="text" ng-model = "student.fees"> </td> </tr> <tr> <td> Ingrese sujeto: </td> <td> <input type = "text" ng-model = "temasname"> </td> </tr> </tr> </tr> <tr> <tr> <td> nombre en el caso superior: </td> <td> {{{{{{{{{{{{{{{{{{{{{{{{{/tr> <tr> <tr> <TD> en caso uppercase}} </td> </tr> <tr> <td> nombre en minúsculas: </td> <td> {{student.fullName () | minúsculas}} </td> </tr> <tr> <td> tarifas: </td> <td> {{student.fees | moneda}} </td> </tr> <tr> <td> sujeto: </td> <td> <ul> <li ng-depheat = "asunto en student.subjects | filtre: temasname | orderby: 'Marks'"> {{stater.name + ', Marks:' + temas.marks}} </li></ul></td></tr></table></div><script>function studentController($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fees:500, subjects:[ {name:'Physics',marks:70}, {name:'Chemistry',marks:80}, {nombre: 'Math', Marks: 65}], fullName: function () {var StudentObject; studentObject = $ scope.student; return studentObject.FirstName + "" + stententObject.lastName; }};} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>Producción
Abra textangularjs.html en un navegador web y vea los siguientes resultados:
Lo anterior es la información que clasifica el filtro AngularJS. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo para este sitio!