Rumah > Artikel > hujung hadapan web > Nota Pengetahuan Asas AngularJS - Filter_AngularJS

Nota Pengetahuan Asas AngularJS - Filter_AngularJS

WBOYasal: 2016-05-16 15:59:501130semak imbas

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

S.No Nama Keterangan
1 Huruf Besar Tukar teks kepada teks huruf besar.
2 Huruf Kecil Tukar teks kepada teks huruf kecil.
3 Teks format Mata Wang.
4 Penapis Menapis subset tatasusunan berdasarkan kriteria yang disediakan.
5 Isih Isih menyediakan tatasusunan asas standard. Penapis topi

Tambah ungkapan penapis huruf besar menggunakan aksara paip. Di sini, penapis huruf besar telah ditambahkan untuk mencetak nama pelajar dalam semua huruf besar.

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

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

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

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>

Isih Penapis

Untuk memesan topik mengikut tag, kami menggunakan teg orderBy.

Subjek:

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

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>

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan：

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

Artikel sebelumnya：JavaScript melaksanakan kemahiran paging_javascript seretan sejukArtikel seterusnya：JavaScript melaksanakan kemahiran paging_javascript seretan sejuk

Artikel berkaitan

Lihat lagi