美文网首页
angular过滤器

angular过滤器

作者: 井皮皮 | 来源:发表于2017-07-14 00:06 被阅读0次

过滤器改变显示方式:

一,angular中的内置过滤器

1.过滤¥,$符号

      |currency  (保留小数点后两位)  123456.789---->$123.456.78

      |currency:"¥"(显示人名币符号)

2.过滤日期

      |data  日期过滤  May 11,2017 

      |data:"yyyy-MM-dd"  年-月-日

      |data:"shortDate"    月/日/年

      |data:"yyyy-MM-dd HH:mm:ss"  年-月-日 时:分:秒

3.过滤数组 

      |Filter  搜索效果

4.过滤json

      |json  数据显示json格式

5.过滤limitTo    数组或字符串 

      |limitTo:3    截取数组前3项

6.把大写的转为小写

      |lowercase    全部小写  aBcDe--->abcde

7.过滤数字

    |number     

    如果字符串里边含有非数字的,则返回空串

    |number:3    保留三位小数

8.过滤参数为字符串的

    |orderBy:    参数是字符窜,

9.把小写的转为大写

    |upercase    全部大写  aBcDe--->ABCDE

二:自定义过滤器

创建自定义过滤器需要将它放到自己的模块中。

下面举例说明:

将name以首字母大写形式显示

{{name|lowercase|Capitalize}}

customfilter.js

(function () {

var app = angular.module(‘customFilter‘, []);

              app.controller(‘filterController‘,function ($scope) {

        $scope.name = ‘JACK‘;

});

app.filter(‘Capitalize‘, function () {

      return function (input) {

      if (input) {

          return input[0].toUpperCase() + input.slice(1);

      }

    };

});

})();

相关文章

  • 关于angular与vue在过滤器方面的不同

    目前看来,angular与vue在过滤器方面差异较大,总的来说angular的过滤器较简单方便,vue的过滤器更像...

  • [基础] angular 过滤器介绍

    [基础] angular 过滤器介绍 用法 HTML javascript 过滤器介绍:currency - 数值...

  • 管道Angular 4 - Pipes

    在本章中,我们将讨论Angular 4中的管道。管道早先在Angular1中称为过滤器,在Angular 2和4中...

  • angular过滤器

    过滤器改变显示方式: 一,angular中的内置过滤器 1.过滤¥,$符号 |currency (保留小数点...

  • AngularJs 自定义过滤器

    除了之前介绍的几种设定好的过滤器之外,angular还允许自定义过滤器。 用例: ...

  • angular2管道pipe

    谁用angular2自定义管道写过过滤器,搜索类似于angular1中firter的功能?急急

  • Vue与Angular、React的区别

    Angular的区别 相同点:都支持指令:内置指令和自定义指令。都支持过滤器:内置过滤器和自定义过滤器。都支持双向...

  • angular tanslate

    参考:https://angular-translate.github.io/ 引用 服务商 服务 过滤器 指令 ...

  • angular pipe 自定义管道

    可以理解为angular中的管道(pipe)与angular1.x的过滤器(filter)一样。 那么我们就来自定...

  • angular过滤器

    在Angular中,过滤器的功能主要是格式化数据表达式,且可以自定义过滤器。作用域(scope)主要服务...

网友评论

      本文标题:angular过滤器

      本文链接:https://www.haomeiwen.com/subject/fwmghxtx.html