Explication détaillée de l'utilisation des filtres dans AngularJS

Explication détaillée de l'utilisation des filtres dans AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:54:38

original

1115 Les gens l'ont consulté

Les filtres sont utilisés pour modifier les données et peuvent être inclus dans des expressions ou à l'aide de directives pipe. Vous trouverez ci-dessous une liste de filtres couramment utilisés.

2015616121340418.jpg (540×292)

Filtre minuscule

Ajoutez un filtre minuscule, en utilisant une expression pipe. Ajoutez un filtre minuscule ici pour imprimer les noms des étudiants en lettres minuscules.

Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

Copier après la connexion

Filtre de devises

Le filtre du dollar canadien utilise le caractère barre verticale pour renvoyer une expression numérique. Ici, nous avons ajouté le filtre Devise pour imprimer les frais au format Devise.

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

Copier après la connexion

Filtre des filtres

Pour afficher uniquement les sujets requis, nous utilisons subjectName comme filtre.

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

Copier après la connexion

Filtre de tri

Pour trier les sujets par balise, nous utilisons la balise orderBy.

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

Copier après la connexion

Exemple

L'exemple suivant démontrera tous les filtres ci-dessus.
testAngularJS.html

<html>
<head>
<title>Angular JS Filters</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr>
<tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>
</table>
<br/>
<table border="0">
<tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>
<tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>
<tr><td>fees: </td><td>{{student.fees | currency}}</td></tr>
<tr><td>Subject:</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>
function studentController($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>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Copier après la connexion

Sortie

Ouvrez textAngularJS.html dans un navigateur Web et voyez les résultats suivants :

2015616121404523.png (688×433)