Penjelasan terperinci tentang penapis tersuai dalam AngularJS_AngularJS

Penapis, seperti namanya, adalah untuk menerima input, memprosesnya mengikut peraturan tertentu, dan kemudian mengembalikan hasil yang diproses. Ia digunakan terutamanya untuk pemformatan data, seperti mendapatkan subset tatasusunan, menyusun elemen dalam tatasusunan, dsb. ng mempunyai beberapa penapis terbina dalam, ia adalah: mata wang (mata wang), tarikh (tarikh), penapis (padanan subrentetan), json (objek json berformat), limitTo (had nombor), huruf kecil (huruf kecil), huruf besar (huruf besar) ) , nombor (nombor), orderBy (sort). Sembilan jenis kesemuanya. Selain itu, anda juga boleh menyesuaikan penapis, yang berkuasa dan boleh memenuhi sebarang keperluan pemprosesan data.

AngularJS menyediakan kami beberapa penapis terbina dalam Berikut ialah beberapa senario untuk penapis tersuai.

Penapis tersuai tanpa parameter

//过滤 不带参数
app.filter('ordinal', function () {
return function (number) {
if (isNaN(number) || number < 1) {
return number;
} else {
var lastDigit = number % 10;
if (lastDigit === 1) {
return number + 'st'
} else if (lastDigit === 2) {
return number + 'nd'
} else if (lastDigit === 3) {
return number + 'rd'
} else if (lastDigit > 3) {
return number + 'th'
}
}
}
});

Digunakan secara kasar seperti ini:

{{777 |

Menapis dengan parameter

Tukar huruf dalam kedudukan tertentu kepada huruf besar.

//过滤 带参数
app.filter('capitalize', function () {
//input 需要过滤的元素
//char位置，索引减一
return function (input, char) {
if (isNaN(input)) {
//如果序号位置没有设置，索引位置默认是0
var char = char - 1 || 0;
//把过滤元素索引位置上的字母转换成大写
var letter = input.charAt(char).toUpperCase();
var out = [];
for (var i = 0; i < input.length; i++) {
if (i == char) {
out.push(letter);
} else {
out.push(input[i]);
}
}
return out.join('');
} else {
return input;
}
}
}); 

Digunakan secara kasar seperti ini:

{{'tujuh' | gunakan huruf besar:3}}

Koleksi penapis

Tapis elemen dalam koleksi yang memenuhi syarat tertentu.

var app = angular.module('filters', []);
app.controller('demo', function ($scope) {
$scope.languages = [
{name: 'C#', type: 'static'},
{name: 'PHP', type: 'dynamic'},
{name: 'Go', type: 'static'},
{name: 'JavaScript', type: 'dynamic'},
{name: 'Rust', type: 'static'}
];
});
//过滤集合
app.filter('staticLanguage', function () {
return function (input) {
var out = [];
angular.forEach(input, function (language) {
if (language.type === 'static') {
out.push(language);
}
});
return out;
}
}); 

Digunakan secara kasar seperti ini:

<li ng-repeat="lang in languages | staticLanguage">{{lang.name}}</li>

Tapis, ambil berbilang parameter, lakukan berbilang perkara

Tentukan unit paparan dan kedudukan paparan nombor.

var app = angular.module('filters', []);
app.controller('demo', function ($scope) {
$scope.digit = 29.88;
});
//过滤 做多件事 多个参赛
app.filter('customCurrency', function () {
return function (input, symbol, place) {
if (isNaN(input)) {
return input;
} else {
//检查symbol是否有实参
var symbol = symbol || '￥';
var place = place === undefined ? true : place;
if(place===true){
return symbol+input;
}else{
return input + symbol;
}
}
}
}); 

Digunakan secara kasar seperti ini:

<p><strong>Original:</strong></p>
<ul><li>{{digit}}</li></ul>
<p><strong>Custom Currency Filter</strong></p>
<ul>
<li>{{digit | customCurrency}} --Default</li>
<li>{{digit | customCurrency:'元'}} --custom symbol</li>
<li>{{digit | customCurrency:'元':false}} -- custom symbol and custom location</li>
</ul>

Dua cara untuk menggunakan penapis

1. Gunakan penapis dalam templat

Kami boleh menggunakan penapis secara langsung dalam {{}}, diikuti dengan | untuk memisahkan ungkapan adalah seperti berikut:

{{ expression | filter }}

Anda juga boleh menggunakan berbilang penapis bersama-sama, dan output penapis sebelumnya akan digunakan sebagai input penapis seterusnya (tidak hairanlah produk ini kelihatan seperti paip...)

{{ expression | filter1 | filter2 | ... }}

penapis boleh menerima parameter, dan parameter dibahagikan dengan :, seperti berikut:

{{ expression | filter:argument1:argument2:... }}

Selain memformat data dalam {{}}, kami juga boleh menggunakan penapis dalam arahan, contohnya, menapis tatasusunan dahulu dan kemudian menggelungkan output:

<span ng-repeat="a in array | filter ">

2. Gunakan penapis dalam pengawal dan perkhidmatan

Penapis juga boleh digunakan dalam kod js kami melalui suntikan kebergantungan yang biasa kami gunakan Sebagai contoh, jika saya ingin menggunakan penapis mata wang dalam pengawal, saya hanya perlu memasukkannya ke dalam pengawal berikut:

app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534); 
}

Gunakan {{num}} dalam templat untuk terus mengeluarkan $123,534.00! Perkara yang sama berlaku untuk menggunakan penapis dalam perkhidmatan.

Pada ketika ini anda mungkin ragu-ragu Jika saya ingin menggunakan berbilang penapis dalam pengawal, adakah saya perlu menyuntiknya satu persatu. Adik, jangan risau~ng menyediakan perkhidmatan $filter untuk memanggil penapis yang diperlukan Anda hanya perlu menyuntik $filter Cara penggunaannya adalah seperti berikut:

app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
　　$scope.date = $filter('date')(new Date()); 
}

Kesan yang sama boleh dicapai. Kelebihannya ialah anda boleh menggunakan penapis yang berbeza dengan mudah.