AngularJS中自定义过滤器-白红宇

AngularJS中自定义过滤器

阅读量：5943 次

发布时间：2019-06-19

本文共 2851 字，大约阅读时间需要 9 分钟。

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)) {            //如果序号位置没有设置，索引位置默认是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;        }    }});

大致这样使用：

{

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

大致这样使用：

Original:
     
      {
   {digit}}
     
Custom Currency Filter
       
      {
   {digit | customCurrency}} --Default
  
      {
   {digit | customCurrency:'元'}} --custom symbol
  
      {
   {digit | customCurrency:'元':false}} -- custom symbol and custom location