Maison > Article > interface Web > Explication détaillée de l'utilisation des filtres dans AngularJS_AngularJS

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

WBOYoriginal: 2016-05-16 15:54:381116parcourir

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}}

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}}

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>

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>

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>

Sortie

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

2015616121404523.png (688×433)

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter des captures d'écran vidéo dans les compétences js HTML5_javascriptArticle suivant：Comment implémenter des captures d'écran vidéo dans les compétences js HTML5_javascript

Articles Liés

Voir plus