Di dunia AngularJS, filter menyediakan cara untuk memformat data. Angular juga memberi kami banyak filter bawaan, dan juga cukup mudah untuk membuat filter khusus.
Dalam HTML Template Binding {{}}, kami menggunakan | untuk menelepon filter. Misalnya, kami ingin string menampilkan semua karakter modal:
{{name | huruf besar}}Tentu saja, kami juga dapat menggunakan layanan $ filter di JavaScript untuk memanggil filter, dan menggunakan kapitalisasi string sebagai contoh:
app.controller ('democontroller', ['$ scope', '$ filter', function ($ scope, $ filter) {$ scope.name = $ filter ('huruf kecil') ('ari');}]);Bagaimana cara lulus parameter ke filter? Cukup letakkan parameter setelah filter dan tambahkan usus besar di tengah (jika ada beberapa parameter yang akan dilewati, tambahkan usus besar setelah setiap parameter). Misalnya, filter angka dapat membantu kami membatasi jumlah angka. Jika Anda ingin menampilkan dua tempat desimal, tambahkan nomor: 2.
{{123.456789 | Nomor: 2}}Filter filter terutama digunakan untuk memfilter array data dan mengembalikan array baru yang berisi data subarray.
Misalnya, saat mencari di sisi klien, kami dapat dengan cepat memfilter hasil yang kami inginkan dari array.
Metode filter ini menerima parameter string, objek, atau fungsi untuk memilih/menghapus elemen array.
Mari kita lihat secara detail:
1. Filter bawaan
1, konversi ukuran huruf kecil
{{"String Cap Bawah" | Uppercase}} // Hasil: string tutup bawah {{"Tank is Good" | huruf kecil}} // Hasil: tangki bagus｜ Garis vertikal di sini adalah fungsi pipa. Jika Anda terbiasa dengan Linux, fungsi pipa dari bagian ini pada dasarnya sama dengan 2, JSON diformat
{{{foo: "bar", baz: 23} | json}} // hasil: {"foo": "bar", "baz": 23}Catatan: BZA tidak memiliki kutipan ganda sebelum format, dan dikonversi menjadi data JSON setelah pemformatan.
3. Pemformatan tanggal
MySQL Timestamp ng-bind = "pesan.Time * 1000 | Tanggal: 'yyyy-mm-dd'"
{{1304375948024 | Tanggal: 'Medium'}} // 03 Mei 2011 06:39:08 PM {{1304375948024 | Tanggal}} // Hasil: 3 Mei 2011 {{1304375948024 | Tanggal: "MM/DD/YYYY @ H: MMA"}} // Hasil: 05/03/2011 @ 6:39 AM {{1304375948024 | Tanggal: "YYYY-MM-DD HH: MM: SS"}} // Hasil: 2011-05-03 06:39:084. Pemformatan nomor
{{1.234567 | Nomor: 1}} // Hasil: 1.2 {{1234567 | angka}} // Hasil: 1.234.5675. Pemformatan Mata Uang
{{250 | Mata uang}} // Hasil: $ 250.00 {{250 | Mata uang: "RMB ￥"}} // Hasil: RMB ￥ 250.006. Pencarian filter hanya dapat memeriksa nilai, bukan kunci
{{[{"usia": 20, "id": 10, "name": "iPhone"}, {"usia": 12, "id": 11, "name": "sunm xing"}, {"usia": 44, "id": 12, "name": "uji abc"}] | Filter: 's'}} // Temukan baris dengan s // hasil dari contoh di atas: [{"usia": 12, "id": 11, "name": "sunm xing"}, {"usia": 44, "id": "name": "test abc"}] {{[{"{" {"{" {"{" {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{":" 12, "id": 11, "name": "sunm xing"}, {"usia": 44, "id": 12, "name": "test abc"}] | filter: {'name': 'ip'}}} // Temukan garis nama seperti ip // hasil dari contoh di atas: [{"usia": 20, "id": 10, "name": "iPhone"}] $ filter ('nomor') (30000, 2); var jsonstring = $ filter ('json') ({"usia": 12, "id": 11, "name": "sunm xing"}, {"usia": 44, "id": 12, "name": "test abc"}])7. String Limitto, Intercept Objek
{{"I Love Tank" | Limitto: 6}} // Hasil: I Love {{"I Love Tank" | limitto: -4}} // hasil: tank {{[{"usia": 20, "id": 10, "name": "iPhone"}, {"usia": 12, "id": 11, "name": "sunm xing"}, {"usia": 44, "id": 12, "name": "name" uji "}, {" usia ": 44," ID ": 12," NAME ":" ABC ":" ABC "ABC" {{44, Limitto: 1}} // Hasil: [{"usia": 20, "id": 10, "name": "iPhone"}]8. Pemesanan Objek Pemesanan
{{[{"usia": 20, "id": 10, "name": "iPhone"}, {"usia": 12, "id": 11, "name": "sunm xing"}, {"usia": 44, "id": 12, "name": "uji abc"}] | orderBy:'id':true }} // Root id descending order {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id' }} //Sorted {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderby: ['-usia', 'name']}}2. Fungsi Filter Kustom
Metode kustomisasi filter juga sangat sederhana. Gunakan metode filter modul untuk mengembalikan fungsi yang menerima nilai input dan mengembalikan hasil yang diproses.
app.filter ('name filter', function () {return function (objek yang perlu disaring, filter parameter 1, filter parameter 2, ...) {//...do beberapa hal mengembalikan objek yang diproses;}});Saya menemukan kerangka kerja dasar AngularJS MVC, phonecat, dan filter khusus, yang juga ditulis berdasarkan ini. Kerangka kerja ini sangat berguna.
filter.js menambahkan modul
angular.module ('tanktest', []). filter ('tankreplace', function () {return function (input) {return input.replace (/tank/, "=======")};});Dipanggil dalam html
{{"Tank itu bagus" | huruf kecil | Tankreplace}} // Hasil: =====Catatan: | huruf kecil | Perintah pipa tankreplace dapat memiliki banyak
yourapp.filter ('orderObjectBy', function () {return function (item, field, reverse) {var filtered = []; angular.foreach (item, function (item) {filtered.push (item);}); filtered.sort (function (a, b) {return (a [bidang]> b [bidang]? disaring;};Filter ini mengubah objek menjadi array standar dan mengurutkannya berdasarkan bidang yang Anda tentukan. Anda dapat menggunakan filter OrderObjectBy untuk menyerupai Orderby, termasuk nilai boolean setelah nama bidang, dalam urutan yang ditentukan apakah harus dibalik. Dengan kata lain, yang palsu adalah urutan naik, penurunan yang sebenarnya. panggilan html
<li ng-repeat = "item dalam item | orderObjectBy: 'color': true"> {{item.color}} </li>Urutkan pencarian
<input type = "text" ng-model = "cari" placeholder = "search"> <Thead> <tr> <!-ng-class = "{dropup: true}"-> <th ng-click = "changeorder ('id')" ng-class = "{dropup: order ==== ''}"> Nomor Produk Ng-Class = "{{{{{{{{{{{{{{{{{{{{{{{{{{{{ng-class === 'ID'} "> </span> </th> <th ng-click =" changeorder ('name') "ng-class =" {dropup: order === ''} "> nama produk <span ng-class =" {ordolor: orderType === nama '} "> </span> </th> {{{{{{{{{{{{{{{{{{" {{{{{{{{{that = "" "" "" "" "" === ''} "> Harga produk <span ng-class =" {ordercolor: orderType === 'Price'} "> </span> </th> </tr> </thead> <tbody> <ttr ng-repeat =" item di ProductData: order {ttr-repeat> {ttran> {ttran> {ttran> {ttran> {ttran> {ttran> {ttran> {ttran> <td> {{item.name}} </td> <td> {{item.price | Mata uang: '￥'}} </td> </tr> </tbody>AngularJS
// bidang penyortiran default $ scope.orderType = 'id'; $ scope.order = '-'; $ scope.changeOrder = function (type) {console.log (type); $ scope.orderType = type; if ($ scope.order === '') {$ scope.order = '-'; } else {$ scope.order = ''; }}