demo
Inilah seluruh contoh demo
1. File Filter.js
angular.module("exampleApp", []).constant("productsUrl", "http://localhost:/products").controller("defaultCtrl", function ($scope, $http, productsUrl) {$http.get(productsUrl).success(function (data) {$scope.products = data;//Directly converted to array});});Di sini saya menggunakan layanan yang diperkenalkan sebagai konstan, dan keuntungan menulis ini adalah bahwa saya dapat dengan mudah memodifikasinya.
Untuk cara menggunakan layanan $ http, silakan merujuk ke angularjs saya (iii) yang digunakan
<! Doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "exampleappp"> <adom> <meta http-equiv = "content-type" content = "text/html; charset = UTF-"/> </content-type = "text/html; charset = UTF-"/> </Content-Type "</text/html; charset = UTF-"//</Type- Content = "Text/html; charset = UTF-UTF-"/> src = "angular.js"> </script> <link href = "bootstrap-theme.css" rel = "stylesheet"/> <link href = "bootstrap.css" rel = "stylesheet"/> <script src = "filter.js"> </script> </head-head> <script src = "filter.js"> </script> </head-head> <script src = "filter.js"> </script> </header> <body ng = " > <dv> <hv> <h> Produk </h> </div> <able> <Thead> <tr> <td> Nama </td> <td> Kategori </td> <td> Harga </td> <td> </ting = "item {ttran> </tdr> </tdbody </ttran> <tdbody> <ttran> <tdbod> </ttrion </tds ' Uppercase}} </td> <td> {{item.category}} </td> <td> {{item.price | Mata uang}} </td> <td> {{item.expiry | Nomor}} </td> <td> {{item | JSON}} </td> </tr> </tbody> </able> </div> </body> </html>Hasil Lari:
Gunakan filter
Filter dibagi menjadi dua kategori:
1. Menyaring data individu
2. Beroperasi di set.
1. Relatif mudah untuk mengoperasikan data . Seperti yang ditunjukkan pada demo, dapat diformat dalam {{item | Mata uang}}, dll.
Mata uang: "F" bisa menjadi harga yang disaring menjadi pound.
Filter data tunggal ingin memfilter format data, setelah filter: dalam karakter format yang sesuai.
Angka: mewakili tempat desimal data yang dipesan.
2: Penyaringan koleksi , memfilter nomor tertentu dari koleksi.
Dalam demo dasar, saya menambahkan ini:
<v> <h> Produk </h> </div> <div> Batas: <pilih ng-model = "limitValue" ng-options = "p untuk p di limitrange"> </dect> </div> filter.js telah ditambahkan: $ http.get (productUrl) .success (function (data) {$ $ http.get (Data = Langsung. $ scope.limitValue = ""; // Jika itu adalah string <span style = "latar belakang: rgb (,,);"> $ scope.limitrange = []; untuk (var i =; i <= $ scope.products.length; i ++) {$ scope.limitrange.push (i.tostring (i.tostring; i ++) {$ scope.limitrange.push (i.tostring (i.tostring; i ++) {$ scope.limitrange.push (i.toString (); } </span> </span>}); <tr ng-repeat = "item dalam produk | limitto: limitvalue"> <td> {{item.name | Uppercase}} </td> <td> {{item.category}} </td> <td> {{item.price | Mata uang}} </td> <td> {{item.expiry | Nomor}} </td> <td> {{item | json}} </td> </tr> <span style = "line-height:.; font-family: verdana, arial, helvetica, sans-serif; font-size: px; latar belakang-warna: rgb (,);"> </span>Saat menulis fungsi, Anda harus ditulis secara sukses karena data JSON diperoleh secara tidak sinkron.
hasil:
Batas: Anda dapat menyesuaikan jumlah yang ditampilkan pada halaman.
Buat filter
AngularJS memiliki dua filter. Pertama, kami dapat membuat filter yang memformat data individu, seperti: output string kapitalisasi huruf pertama.
Mari kita bicara tentang cara mendefinisikan filter: filter dibuat melalui modul.filter, dan format umum dari kreasi adalah:
angular.module ("exampleappp") // berarti mendapatkan modul. Filter dibuat di bawah modul.
.filter ("labelcase", function () {// menerima dua parameter, parameter pertama mewakili nama filter, dan yang kedua adalah fungsi pabrik
fungsi pengembalian (nilai, terbalik) {// mengembalikan fungsi pekerja untuk memfilter proses penyaringan yang sesuai. Parameter pertama menunjukkan objek yang perlu diformat, dan parameter kedua menunjukkan konfigurasi dan format apa yang akan diikuti.
if (angular.isstring (value)) {var intermediate = reverse? value.touppercase (): value.tolowercase (); return (reverse? Intermediate []. TolowerCase (): Intermediate []. Toupercase () + Intermediate.substr ());} else {value return;}});Saya menulis ini ke dalam file JS. CustomFilter.js Jangan lupa menambahkannya.
<tautan href = "bootstrap.css" rel = "stylesheet"/> <script src = "filter.js"> </script> <script src = "customfilter.js"> </cript>
Ok sekarang saya akan mengubah data:
<td> {{item.name | Labelcase: true}} </td>Seperti yang disebutkan sebelumnya, jika Anda perlu menambahkan informasi konfigurasi, format penulisan adalah filter: opsi
Tentu saja, parameter default tidak dapat ditulis, dan nilai default akan diberikan nol atau tidak ditentukan.
hasil:
Sederhana untuk menyesuaikan fungsi filter untuk memproses setiap data.
2. Kustomisasi fungsi yang diproses oleh koleksi, seperti Limitto.
angular.module ("exampleApp"). filter ("labelcase", function () {return function (value, reverse) {if (angular.isstring (value)) {var intermediate = reverse? value.touppercase (): value.tolowercase (); reverse? Intermediate.substr ());} else {value return;}}}). filter ("skip", function () {return function (data, count) {ifular.isArray (data) && angular.isnumber (count)) {if (data.length <count || count <) {data return; {{{if lain) (count | i count <) {data return; {{{if {data) {data) {data) data;}}});Bagian yang dimodifikasi HTML:
<tr ng-repeat = "item dalam produk | lewati:">
Hasil: Ada total enam lembar data, dan 2 buah dilewatkan dengan menggunakan filter lewati.
Saat menyesuaikan filter, saya menemukan bahwa filter telah ditentukan. Saya tidak ingin berulang kali mendefinisikannya. Apa yang harus saya lakukan? Kami juga dapat menggunakan filter yang dibuat untuk membuatnya.
angular.module ("exampleApp"). filter ("labelcase", function () {return function (value, reverse) {if (angular.isstring (value)) {var intermediate = reverse? value.touppercase (): value.tolowercase (); reverse? Intermediate.substr ());} else {value return;}}}). filter ("skip", function () {return function (data, count) {ifular.isArray (data) && angular.isnumber (count)) {if (data.length <count || count <) {data return; {{{if lain) (count | i count <) {data return; {{{if {data) {data) {data) Data;}}}). Filter ("Take", function ($ filter) {// Anda dapat melihat bahwa saya merujuk layanan bawaan AngularJS dalam fungsi pabrik. Fungsi pengembalian (data, skipcount, takcount) {// Anda dapat melihat apakah saya melewati tiga parameter di sini? Var skipdata = $ filter ('skip'). $ filter ("Limitto") (SkipData, TakeCount); // Limitto adalah filter bawaan.}});$ filter ('lewati') memanggil filter lewati, karena mengembalikan fungsi, sehingga kami dapat terus melewati parameter.
<tr ng-repeat = "item dalam produk | Take ::">
hasil:
Begitulah cara filter dilakukan. Bukankah itu sangat sederhana?