?

AngularJS中為我們提供了一些內置的過濾器，這里列舉一些自定義過濾器的場景。

自定義過濾器，不帶參賽

//過濾 不帶參賽 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}}

過濾 帶參賽

把某個位置上的字母轉換成大寫。

?

?

//過濾 帶參賽 app.filter('capitalize', function () {//input 需要過濾的元素//char位置，索引減一return function (input, char) {if (isNaN(input)) {//如果序號位置沒有設置，索引位置默認是0var 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;}} });

?

?大致這樣使用：

{{'seven' | capitalize:3}}

過濾集合

過濾出集合中滿足某種條件的元素。

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;} });

?

大致這樣使用：


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

過濾，帶多個參數，做多件事

定義數字的顯示單位和顯示位置。

?

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;}}} });

?

大致這樣使用：

?

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

?

轉載于:https://www.cnblogs.com/darrenji/p/5081493.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。