Filter AngularJS
Filter dapat ditambahkan ke ekspresi dan arahan menggunakan karakter pipa (|).
Filter AngularJS
Filter AngularJS dapat digunakan untuk mengonversi data:
| Menyaring | menggambarkan |
|---|---|
| mata uang | Format angka ke dalam format mata uang. |
| menyaring | Pilih subset dari item array. |
| huruf kecil | String format adalah huruf kecil. |
| pesanan | Atur array sesuai dengan ekspresi. |
| huruf besar | String yang diformat dikapitalisasi. |
Tambahkan filter ke ekspresi
Filter dapat ditambahkan ke ekspresi melalui karakter pipa (|) dan filter. .
((Dalam dua contoh berikut, kami akan menggunakan pengontrol orang yang disebutkan dalam bab sebelumnya))
Filter huruf besar memformat string ke huruf besar:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "personctrl"> <p> Namanya {{lastName | Uppercase}} </p> </div> <script src = "personController.js"> </script> </body> </html>Hasil Menjalankan:
Nama Doe
Filter huruf kecil memformat string ke huruf kecil:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "personctrl"> <p> Namanya {{lastName | huruf kecil}} </p> </div> <script src = "personController.js"> </script> </body> </html>Hasil Menjalankan:
Bernama doe
filter mata uang
Filter mata uang memformat angka menjadi format mata uang:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv-pr-app = "costs (costs =/script> </head> </head> <body> <bod-Ng-Pr-p ="> </script> </head> <body> <bod- div <input type = "number" ng-model = "kuantitas"> Harga: <input type = "angka" ng-model = "harga"> <p> Total harga = {{(kuantitas * harga) | Mata uang}} </p> </div> <script> var app = angular.module ('myapp', []); app.controller ('costctrl', function ($ scope) {$ scope.quantity = 1; $ scope.price = 9.99;}); </script> </body> ht/htl = 9.99;}); </script> </body>Hasil Menjalankan:
kuantitas: harga:
Total Harga = $ 9,99
Tambahkan filter ke arahan
Filter dapat ditambahkan ke arahan melalui karakter pipa (|) dan filter.
Filter orderby mengatur array sesuai dengan ekspresi:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "namesctrl"> <p> Objek loop: </p> <ul> <li ng-repeat = "x dalam nama | orderby: 'country'"> {{x.name + ',' + x.country}} </li> </ul> </div> <script src = "namescontroller.js"> </script> </body> </html>Hasil Menjalankan:
Objek Loop:
Input filter
Filter input dapat ditambahkan ke arahan dengan karakter pipa (|) dan filter diikuti oleh usus besar dan nama model.
Filter filter memilih subset dari array:
Instance AngularJS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "namesctrl"> <p> Penyaringan input: </p> <p> <input type = "text" ng-model = "test"> </p> <ul> <li ng-repeat = "x dalam nama | filter: test | orderby: 'country'"> {{x.name | ucpercer: {x.nping | ucperc: 'country', 'country' "> {x.name | uLporer) </li> </ul> </div> <script src = "namescontroller.js"> </script> </body> </html>Efek Menjalankan:
Penyaringan Input:
Di atas adalah ringkasan pengetahuan tentang filter AngularJS. Kami akan terus menambahkannya nanti. Teman yang membutuhkannya bisa merujuknya.