Tablas de AngularJS Controladores de AngularJS

Filtros de AngularJS

Los filtros se utilizan para modificar los datos. Se pueden combinar usando el carácter vertical (|) en expresiones o instrucciones. A continuación se muestra una lista de los filtros más comunes.

Número de serie	Nombre y descripción
1	`uppercase` Convertir el texto en texto mayúsculo.
2	`lowercase` Convertir el texto en texto minúsculo.
3	`currency` Establecer el formato de texto en formato monetario.
4	`filter` Filtrar el array para formar un subconjunto del array según las condiciones proporcionadas.
5	`ordenar por` Ordenar el array según las condiciones proporcionadas.

uppercase - Filtro de mayúsculas

Utilice el carácter de tubería (|) para agregar el filtro de mayúsculas a la expresión. Aquí, hemos agregado el filtro de mayúsculas para imprimir el nombre del estudiante en mayúsculas.

Introduzca el nombre: <input type = "text" ng-model = "student.firstName">
Introduzca el apellido: <input type = "text" ng-model = "student.lastName">
Nombre en mayúsculas: {{student.fullName() | uppercase}}

lowercase - Filtro de minúsculas

Utilice el carácter de tubería (|) para agregar el filtro de minúsculas a la expresión. Aquí, hemos agregado el filtro de minúsculas para imprimir el nombre del estudiante en minúsculas.

Introduzca el nombre: <input type = "text" ng-model = "student.firstName">
Introduzca el apellido: <input type = "text" ng-model = "student.lastName">
Nombre en minúsculas: {{student.fullName() | lowercase}}

currency - Filtro monetario

Utilice el carácter vertical (|) para agregar el filtro monetario a la expresión devuelta como número. Aquí, hemos agregado el filtro monetario para imprimir las tasas en formato monetario.

Introduzca las tasas: <input type = "text" ng-model = "student.fees">tasas: {{student.fees | currency}}

filter - Filtro

Para mostrar solo los temas necesarios, utilizamos subjectName como filtro.

Introduzca el tema: <input type = "text" ng-model = "subjectName">
Tema:
<ul>
　　　<li ng-repeat = "subject in student.subjects | filter: subjectName">
　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　</li>
</ul>

ordenar por　- Filtro

Para ordenar los temas por marcadores, utilizamos el marcador orderBy.

Título:
<ul>
　　　<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　</li>
</ul>

Ejemplo en línea

El siguiente ejemplo muestra el uso de todos los filtros mencionados anteriormente.

testAngularJS.htm

Ejemplo

<html>
　　　<head>
　　　　　　<title>Angular JS Filters</title>
　　　　　　<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Ejemplo de uso de filtros AngularJS</h2>
　　　　　　
　　　　　　<div ng-app = "mainApp" ng-controller = "studentController">
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>输入名字:</td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.firstName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>输入姓氏: </td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.lastName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>输入费用: </td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "student.fees"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>输入主题: </td>
　　　　　　　　　　　　　　　<td><input type = "text" ng-model = "subjectName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　　　　<br/>
　　　　　　　　　
　　　　　　　　　<table border = "0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>大写名称: </td><td>{{ student.fullName() | uppercase}}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>小写名称: </td><td>{{ student.fullName() | lowercase}}</td>/td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>费用: </td><td>{{ student.fees | currency}}
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>主题:</td>
　　　　　　　　　　　　　　　<td>
　　　　　　　　　　　　　　　　　　<ul>
　　　　　　　　　　　　　　　　　　　　　<li ng-repeat = "subject in student.subjects | filter: subjectName | orderBy:'marks'">
　　　　　　　　　　　　　　　　　　　　　　　　{{ subject.name　+　', marks:'　+　subject.marks }}
　　　　　　　　　　　　　　　　　　　　　</li>
　　　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController',　function($scope)　{}}
　　　　　　　　　　　　$scope.student　=　{
　　　　　　　　　　　　　　　firstName:　"Mahesh",
　　　　　　　　　　　　　　　lastName:　"Parashar",
　　　　　　　　　　　　　　　500,
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　subjects:[
　　　　　　　　　　　　　　　　　　{name:'Physics',marks:70},
　　　　　　　　　　　　　　　　　　{name:'Chemistry',marks:80},
　　　　　　　　　　　　　　　　　　{name:'Math',marks:65}
　　　　　　　　　　　　　　　],
　　　　　　　　　　　　　　　fullName:　function()　{
　　　　　　　　　　　　　　　　　　var　studentObject;
　　　　　　　　　　　　　　　　　　studentObject　=　$scope.student;
　　　　　　　　　　　　　　　　　　return　studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Probarlo‹/›

Resultados de salida

Abrir archivo en el navegador de redtestAngularJS.htm。Ver resultados。