Penjelasan terperinci tentang penggunaan AngularJS filters_AngularJS

Penapis AnularJS digunakan untuk memformat data yang perlu dipaparkan kepada pengguna Terdapat banyak penapis terbina dalam yang praktikal, dan anda juga boleh menulisnya sendiri.

Panggil penapis melalui simbol | dalam simbol pengikat templat {{ }} dalam HTML. Sebagai contoh, katakan kita mahu menukar rentetan
Untuk menukar kepada huruf besar, anda boleh menukar setiap aksara dalam rentetan secara individu atau anda boleh menggunakan penapis:

{{ nama |
Penapis boleh dipanggil melalui $filter dalam kod JavaScript. Contohnya, menggunakan huruf kecil dalam kod JavaScript Penapis:

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);

Apabila menggunakan penapis dalam bentuk HTML, jika anda perlu menghantar parameter kepada penapis, cuma tambahkan titik bertindih selepas nama penapis

itu sahaja. Jika terdapat berbilang parameter, anda boleh menambah titik bertindih selepas setiap parameter. Contohnya, penapis berangka boleh mengehadkan bilangan tempat perpuluhan
Bilangan digit, tulis: 2 selepas penapis, anda boleh lulus 2 sebagai parameter kepada penapis:

<!-- 显示：123.46 -->
{{ 123.456789 | number:2 }}

1. mata wang Penapis mata wang boleh memformat nilai berangka ke dalam format mata wang. Gunakan {{ 123 |. mata wang }} untuk menukar 123
ke dalam format mata wang.
Penapis mata wang membolehkan kami menetapkan sendiri simbol mata wang. Secara lalai, simbol mata wang rantau pelanggan akan digunakan,
Tetapi anda juga boleh menyesuaikan simbol mata wang.

2. Penapis tarikh boleh memformat tarikh ke dalam format yang diperlukan. Terdapat beberapa format tarikh terbina dalam AngularJS, jika tidak
Tentukan sebarang format untuk digunakan Format mediumDate akan digunakan secara lalai Format ini ditunjukkan dalam contoh di bawah.
Berikut ialah format tarikh setempat yang disokong terbina dalam:

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

Pemformatan tahun
Tahun empat digit: {{ hari ini | tarikh:'yyyy' }} Tahun dua digit: {{ hari ini | tarikh:'yy' }}
Tahun: {{ hari ini |. tarikh:'y' }}

Pemformatan bulan
Bulan Inggeris: {{ hari ini | tarikh:'MMMM' }} Singkatan bulan Inggeris: {{ hari ini | tarikh:'MMM' }}
Bulan angka: {{ hari ini |tarikh:'MM' }}
Bulan dalam tahun: {{ hari ini |tarikh:'M' }}

Pemformatan tarikh
Tarikh angka: {{ hari ini|tarikh:'dd' }} Hari dalam bulan: {{ hari ini |. tarikh:'d' }}
Hari Inggeris dalam minggu: {{ hari ini | tarikh:'EEEE' }}
Singkatan minggu bahasa Inggeris: {{ hari ini | tarikh:'EEE' }}

Pemformatan jam Jam digital 24 jam: {{hari ini|tarikh:'HH'}}
Jam dalam hari: {{hari ini|tarikh:'H'}}
Jam digital 12 jam: {{hari ini|tarikh:'hh'}}
Jam pada waktu pagi atau petang: {{hari ini|tarikh:'h'}}

Pemformatan minit Minit angka: {{ hari ini |. tarikh:'mm' }}
Minit jam: {{ hari ini | tarikh:'m' }}

Pemformatan saat Saat berangka: {{ hari ini |. tarikh:'ss' }}
Yang kedua dalam seminit: {{ hari ini | tarikh:'s' }}
Bilangan milisaat: {{ hari ini |. tarikh:'.sss' }}
Berikut ialah beberapa contoh format tarikh tersuai:

{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

penapis

penapis penapis boleh memilih subset daripada tatasusunan yang diberikan dan menjana tatasusunan baharu serta mengembalikannya.

Sebagai contoh, gunakan penapis berikut untuk memilih semua perkataan yang mengandungi huruf e:

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->

Jika anda ingin menapis objek, anda boleh menggunakan penapis objek yang dinyatakan di atas. Contohnya, jika anda mempunyai

yang terdiri daripada objek orang Tatasusunan, setiap objek mengandungi senarai makanan kegemaran mereka, yang boleh ditapis dalam bentuk berikut:

{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

Anda juga boleh menggunakan fungsi tersuai untuk penapisan (dalam contoh ini fungsi ditakrifkan pada $scope):

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->

Fungsi fungsi isCapitalized adalah untuk mengembalikan benar atau salah mengikut sama ada huruf pertama ditulis dengan huruf besar, seperti yang ditunjukkan di bawah:

$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};

Penapis tersuai

Pertama, buat modul untuk rujukan dalam aplikasi

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});

Sekarang, jika anda ingin menukar huruf pertama ayat kepada huruf besar, anda boleh menggunakan penapis untuk menukar keseluruhan ayat kepada huruf besar dahulu

Tulis, kemudian tukar huruf pertama kepada huruf besar:

<!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize }}

Di atas ialah cara menggunakan penapis AngularJS saya harap ia akan membantu pembelajaran semua orang.