?

AngularJS中為我們提供了一些內(nèi)置的過(guò)濾器，這里列舉一些自定義過(guò)濾器的場(chǎng)景。

自定義過(guò)濾器，不帶參賽

//過(guò)濾 不帶參賽 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'}}} });

?

大致這樣使用：

{{777 | ordinal}}

過(guò)濾 帶參賽

把某個(gè)位置上的字母轉(zhuǎn)換成大寫(xiě)。

?

?

//過(guò)濾 帶參賽 app.filter('capitalize', function () {//input 需要過(guò)濾的元素//char位置，索引減一return function (input, char) {if (isNaN(input)) {//如果序號(hào)位置沒(méi)有設(shè)置，索引位置默認(rèn)是0var char = char - 1 || 0;//把過(guò)濾元素索引位置上的字母轉(zhuǎn)換成大寫(xiě)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;}} });

?

?大致這樣使用：

{{'seven' | capitalize:3}}

過(guò)濾集合

過(guò)濾出集合中滿(mǎn)足某種條件的元素。

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'}]; });//過(guò)濾集合 app.filter('staticLanguage', function () {return function (input) {var out = [];angular.forEach(input, function (language) {if (language.type === 'static') {out.push(language);}});return out;} });

?

大致這樣使用：


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

過(guò)濾，帶多個(gè)參數(shù)，做多件事

定義數(shù)字的顯示單位和顯示位置。

?

var app = angular.module('filters', []);app.controller('demo', function ($scope) {$scope.digit = 29.88; });//過(guò)濾 做多件事 多個(gè)參賽 app.filter('customCurrency', function () {return function (input, symbol, place) {if (isNaN(input)) {return input;} else {//檢查symbol是否有實(shí)參var symbol = symbol || '￥';var place = place === undefined ? true : place;if(place===true){return symbol+input;}else{return input + symbol;}}} });

?

大致這樣使用：

?

<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>

?

轉(zhuǎn)載于:https://www.cnblogs.com/darrenji/p/5081493.html

總結(jié)

以上是生活随笔為你收集整理的AngularJS中自定义过滤器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。