你的位置:首页 > Java教程

[Java教程]AngularJS中自定义过滤器


 

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

 

大致这样使用:

 

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