Penjelasan terperinci tentang menggunakan penapis dalam AngularJS_AngularJS

WBOY
Lepaskan: 2016-05-16 15:54:38
asal
1115 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)

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!