angular过滤器

过滤器改变显示方式:

一,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中,过滤器的功能主要是格式化数据表达式,且可以自定义过滤器。作用域(scope)主要服务...
    否冷_阅读 639评论 0 5
  • 1.angular过滤器,是用于对数据的格式化,或者筛选的函数,可以直接在模板中通过一种语法使用 {{expres...
    苹果橘子味阅读 394评论 0 3
  • 过滤器 在AngularJS中使用过滤器格式化展示数据 ,作用就是接收一个输入,通过某个规则进行处理.然后返回处理...
    codeTao阅读 595评论 0 0
  • [基础] angular 过滤器介绍 用法 HTML javascript 过滤器介绍:currency - 数值...
    Top_Chenxi阅读 110评论 0 0
  • 过滤器$filter json格式化为json格式。如果是{{json expression | json: 5}...
    iqing2012阅读 648评论 0 0