Penjelasan terperinci tentang menggunakan penapis dalam AngularJS

Penjelasan terperinci tentang menggunakan penapis dalam AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:54:38

asal

1150 orang telah melayarinya

Penapis digunakan untuk mengubah suai data dan boleh disertakan dalam ungkapan atau menggunakan arahan paip. Di bawah ialah senarai penapis yang biasa digunakan.

2015616121340418.jpg (540×292)

Penapis huruf kecil

Tambah penapis huruf kecil, menggunakan ungkapan paip. Tambahkan penapis huruf kecil di sini untuk mencetak nama pelajar dalam huruf kecil.

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

Salin selepas log masuk

Penapis Mata Wang

Penapis dolar Kanada menggunakan aksara paip untuk mengembalikan ungkapan nombor. Di sini kami telah menambah penapis Mata Wang untuk mencetak caj menggunakan format Mata Wang.

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

Salin selepas log masuk

Penapis penapis

Untuk menunjukkan hanya subjek yang diperlukan, kami menggunakan subjectName sebagai penapis.

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>

Salin selepas log masuk

Isih Penapis

Untuk memesan topik mengikut tag, kami menggunakan teg orderBy.

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

Salin selepas log masuk

Contoh

Contoh berikut akan menunjukkan semua penapis di atas.
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>

Salin selepas log masuk

Output

Buka textAngularJS.html dalam pelayar web dan lihat hasil berikut:

2015616121404523.png (688×433)