过滤器AngularJS

Il filtro viene utilizzato per modificare i dati. È possibile combinare più filtri in un'espressione o un comando utilizzando il carattere di pipe (|). Di seguito è riportata una lista dei filtri più comuni.

Numero di sequenza	Nome e descrizione
1	`uppercase` Converti il testo in testo maiuscolo.
2	`lowercase` Converti il testo in testo minuscolo.
3	`currency` Imposta la formattazione del testo in formato monetario.
4	`filter` Filtra l'array in base alle condizioni fornite per ottenere un sottoinsieme dell'array.
5	`orderby` Ordina l'array in base alle condizioni fornite.

uppercase - Filtro maiuscolo

Utilizza il carattere pipe per aggiungere il filtro maiuscolo all'espressione. In questo caso, abbiamo aggiunto il filtro maiuscolo per stampare il nome dello studente in maiuscolo.

Inserisci nome: <input type="text" ng-model="student.firstName">
Inserisci cognome: <input type="text" ng-model="student.lastName">
Nome in maiuscolo: {{student.fullName() | uppercase}}

lowercase - Filtro minuscolo

Utilizza il carattere pipe per aggiungere il filtro minuscolo all'espressione. In questo caso, abbiamo aggiunto il filtro minuscolo per stampare il nome dello studente in minuscolo.

Inserisci nome: <input type="text" ng-model="student.firstName">
Inserisci cognome: <input type="text" ng-model="student.lastName">
Nome in minuscolo: {{student.fullName() | lowercase}}

currency - Filtro valuta

Utilizza il carattere pipe per aggiungere il filtro valuta all'espressione restituita da un numero. In questo caso, abbiamo aggiunto il filtro valuta per stampare i costi in formato monetario.

Inserisci costo: <input type="text" ng-model="student.fees">costi: {{student.fees | currency}}

filter - Filtro

Per visualizzare solo gli oggetti necessari, utilizziamo subjectName come filtro.

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

orderby - Filtro

Per ordinare gli oggetti per etichetta, utilizziamo il tag orderBy.

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

Esempio online

Questo esempio mostra l'uso di tutti i filtri menzionati sopra.

testAngularJS.htm

Esempio

<html>
　　　<head>
　　　　　　<title>Filters Angular JS</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Esempio di utilizzo dei filtri AngularJS</h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="studentController">
　　　　　　　　　<table border="0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Inserisci nome:</td>
　　　　　　　　　　　　　　　<td><input type="text" ng-model="student.firstName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Inserisci cognome: </td>
　　　　　　　　　　　　　　　<td><input type="text" ng-model="student.lastName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Inserisci costo: </td>
　　　　　　　　　　　　　　　<td><input type="text" ng-model="student.fees"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Inserisci argomento: </td>
　　　　　　　　　　　　　　　<td><input type="text" ng-model="subjectName"></td>
　　　　　　　　　　　　</tr>
　　　　　　　　　</table>
　　　　　　　　　<br/>
　　　　　　　　　
　　　　　　　　　<table border="0">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Nome maiuscolo: </td><td>{{ student.fullName() | uppercase }}</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Nome minuscolo: </td><td>{{ student.fullName() | lowercase }}</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Costo: </td><td>{{ student.fees | currency }}</td>
　　　　　　　　　　　　　　　</td>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　<td>Argomento:</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",
　　　　　　　　　　　　　　　fees: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>

测试看看‹/›

输出结果

在网络浏览器中打开文件testAngularJS.htm。查看结果。

表格AngularJS 控制器AngularJS

Lezioni di base di AngularJS