Maison > Article > interface Web > Notes de connaissances de base d'AngularJS - Filter_AngularJS

Notes de connaissances de base d'AngularJS - Filter_AngularJS

WBOYoriginal: 2016-05-16 15:59:501130parcourir

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.

S.No Nom Description
1 Majuscule Convertit le texte en texte en majuscule.
2 Minuscules Convertit le texte en texte minuscule.
3 Devise Texte au format monétaire.
4 Filtre Filtre un sous-ensemble du tableau en fonction des critères fournis.
5 Tri Le tri fournit des tableaux de base standard. Filtre majuscules

Ajoutez une expression de filtre majuscule à l'aide du caractère barre verticale. Ici, un filtre en majuscules a été ajouté pour imprimer les noms des étudiants en majuscules.

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() | uppercase}}

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.

Sujet :

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

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：JavaScript implémente des compétences de drag paging_javascript intéressantesArticle suivant：JavaScript implémente des compétences de drag paging_javascript intéressantes

Articles Liés

Voir plus