Rumah hujung hadapan web tutorial js Penjelasan terperinci tentang menggunakan penapis dalam AngularJS_AngularJS

Penjelasan terperinci tentang menggunakan penapis dalam AngularJS_AngularJS

May 16, 2016 pm 03:54 PM
angularjs penapis

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)

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

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

2022年最新5款的angularjs教程从入门到精通 2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

2022年最新5款的angularjs教程从入门到精通

Petua untuk menggunakan pemalam untuk melaksanakan penapis tersuai dalam Vue Petua untuk menggunakan pemalam untuk melaksanakan penapis tersuai dalam Vue Jun 25, 2023 pm 05:01 PM

Petua untuk menggunakan pemalam untuk melaksanakan penapis tersuai dalam Vue

Fungsi penapis dalam Vue3: mengendalikan data dengan elegan Fungsi penapis dalam Vue3: mengendalikan data dengan elegan Jun 18, 2023 pm 02:46 PM

Fungsi penapis dalam Vue3: mengendalikan data dengan elegan

Ralat Vue: Penapis dalam penapis tidak boleh digunakan dengan betul, bagaimana untuk menyelesaikannya? Ralat Vue: Penapis dalam penapis tidak boleh digunakan dengan betul, bagaimana untuk menyelesaikannya? Aug 26, 2023 pm 01:10 PM

Ralat Vue: Penapis dalam penapis tidak boleh digunakan dengan betul, bagaimana untuk menyelesaikannya?

Cara menapis dan mengisih data dalam pembangunan teknologi Vue Cara menapis dan mengisih data dalam pembangunan teknologi Vue Oct 09, 2023 pm 01:25 PM

Cara menapis dan mengisih data dalam pembangunan teknologi Vue

Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi Jun 27, 2023 pm 07:37 PM

Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi

Penapis E-mel PHP: Tapis dan kenal pasti spam. Penapis E-mel PHP: Tapis dan kenal pasti spam. Sep 19, 2023 pm 12:51 PM

Penapis E-mel PHP: Tapis dan kenal pasti spam.

Bina aplikasi web menggunakan PHP dan AngularJS Bina aplikasi web menggunakan PHP dan AngularJS May 27, 2023 pm 08:10 PM

Bina aplikasi web menggunakan PHP dan AngularJS

See all articles