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' }} 2454eba55ce5af447d63d506f0b22009 Tahun dua digit: {{ hari ini | tarikh:'yy' }} ac8ae5c416383e689e62a98e07653199
Tahun: {{ hari ini |. tarikh:'y' }} 2454eba55ce5af447d63d506f0b22009

Pemformatan bulan
Bulan Inggeris: {{ hari ini | tarikh:'MMMM' }} 1175228a245f0187580aab2b7f94dac9 Singkatan bulan Inggeris: {{ hari ini | tarikh:'MMM' }} 1175228a245f0187580aab2b7f94dac9
Bulan angka: {{ hari ini |tarikh:'MM' }} 53031c7c3fbdb98da663f829dbcbec99
Bulan dalam tahun: {{ hari ini |tarikh:'M' }} 0d07dfb83b43f33ffd3d813164ae49ba

Pemformatan tarikh
Tarikh angka: {{ hari ini|tarikh:'dd' }} bdf347c31d338c5559ea24febd3d6d74 Hari dalam bulan: {{ hari ini |. tarikh:'d' }} 10f30089400a4cdc8cfbd8d11fd537ef
Hari Inggeris dalam minggu: {{ hari ini | tarikh:'EEEE' }} 6978ef433fb7a0a066d516f0802d6bcd
Singkatan minggu bahasa Inggeris: {{ hari ini | tarikh:'EEE' }} 282f240238fee697bd60b966ae386e76

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

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

Pemformatan saat Saat berangka: {{ hari ini |. tarikh:'ss' }} 779138eee8ec233d5f15002382413251
Yang kedua dalam seminit: {{ hari ini | tarikh:'s' }} dfa9fc8a6a43443cb66797c35cf883e1
Bilangan milisaat: {{ hari ini |. tarikh:'.sss' }} 132404d696749dd146bc462e6ef8004e
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.