一、currency   货币格式化

<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['$scope',function($scope){

        $scope.name = '723894734.3425234';

    }]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <p>{{name | currency:"￥"}}</p> <!--后面会保留两个小数点-->

</div>

</body>

</html>

 

　　

二、number            数字格式化

<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['$scope',function($scope){

        $scope.name = '723894734.3525234';

    }]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <p>{{ name | number : 1 }}</p>        <!--0表示需要保留的小数位，这里是没有，1就表示1保留一个小数位     会进行四舍五入-->

</div>

</body>

</html>

三、lowercase/uppercase           大小写格式化

<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['$scope',function($scope){

        $scope.name = 'hello';

    }]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <p>{{ name | uppercase }}</p>

</div>

</body>

</html>

四、json        对json格式的数据进行格式化  要在pre这个标签中

<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['$scope',function($scope){

        $scope.name = {"name":"hello","age":"20"};

    }]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <pre>{{ name | json }}</pre>

</div>

</body>

</html>

五、limitTo          截取，可以截取字符串或者数组，后面数组表示截取多少位

<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['$scope',function($scope){

        $scope.name = 'hello';

        //$scope.name = ['a','b','c'];

    }]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <p>{{ name | limitTo : 2 }}</p>

</div>

</body>

</html>

六、date            对时间毫秒值进行时间格式化

<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['$scope',function($scope){

        $scope.name = '3748935795';   //时间毫秒值

    }]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <p>{{ name | date }}</p>

    <p>{{ name | date : 'yyyy' }}</p>   <!--后面的yyyy表示可以自己设置时间的格式-->

</div>

</body>

</html>

七、orderBy         排序作用，针对的是一个数组

<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['$scope',function($scope){

        //必须是下面的格式才能进行排序

        $scope.name = [

            {color:"red",age:"20"},

            {color:"yellow",age:"30"},

            {color:"blue",age:"40"},

            {color:"green",age:"10"}

        ];

    }]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <p>{{ name | orderBy : 'age' : true }}</p>    <!--age表示根据age进行排序的   true表示从大到小     false表示从小到大-->

</div>

</body>

</html>

八、filter             相当于选择

<!DOCTYPE HTML>

<html ng-app="myApp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="angular.min.js"></script>

<script>

    var m1 = angular.module('myApp',[]);

    m1.controller('Aaa',['$scope',function($scope){

        //必须是下面的格式才能进行排序

        $scope.name = [

            {color:"red",age:"20"},

            {color:"yellow",age:"30"},

            {color:"blue",age:"40"},

            {color:"green",age:"10"}

        ];

    }]);

</script>

</head>

<body>

<div ng-controller="Aaa">

    <p>{{ name | filter : 'red' }}</p>       <!--只选择了red    只能是针对value值，对key是没有作用的-->

    <p>{{ name | filter : '40' }}</p>

    <p>{{ name | filter : 'l' }}</p>           <!--只要包含就能匹配-->

    <p>{{ name | filter : 'l' : true}}</p>            <!--这里什么都匹配不到，因为没有l这个，包含有l的也不是-->

</div>

</body>

</html>

angularJs的过滤器的更多相关文章

  1. AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

    1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...

  2. AngularJS开发指南13：AngularJS的过滤器详解

    AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...

  3. 走进AngularJs(七) 过滤器（filter） - 吕大豹

    时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...

  4. AngularJs(八) 过滤器filter创建

    大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...

  5. 创建 AngularJS 自定义过滤器，带自定义参数

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...

  6. AngularJs自定义过滤器filter

    AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...

  7. AngularJS之过滤器

    AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可 ...

  8. angularJS的过滤器！

    angularJS过滤器: filter currency date filter json limitTo lowercase number orderBy uppercase ...... Fil ...

  9. AngularJS：过滤器

    ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤 ...

  10. AngularJS 五 过滤器及验证

    AngularJS过滤: AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式. 格式: 一些比较重要的过滤器: Number               Filter       ...

随机推荐

  1. android系统权限的管理

    被权限搞了好久,决定好好的研究一下: 参考资料 http://blog.csdn.net/xieyan0811/article/details/6083019?reload http://blog.c ...

  2. 自定义ContentTypeHandler在struts2-rest-2.3.16.2不生效

    需要使用自定义的ContentHandler格式化json中的时间类型为指定模式. 在struts.xml中增加了自定义的ContentHandler,但不会生效. http://blog.csdn. ...

  3. SQL Serever学习14——存储过程和触发器

    存储过程 在数据库中很多查询都是大同小异,编写他们费时费力,将他们保存起来,以后执行就很方便了,把SQL语句“封装”起来. 存储过程的概念 存储过程是一组SQL语句集,经过编译存储,可以”一次编译,多 ...

  4. guava快速入门（三）

    Guava工程包含了若干被Google的 Java项目广泛依赖 的核心库,例如:集合 [collections] .缓存 [caching] .原生类型支持 [primitives support] ...

  5. 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例

    背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...

  6. 【SSH网上商城项目实战26】完成订单支付后的短信发送功能

     转自: https://blog.csdn.net/eson_15/article/details/51475431 上一节我们使用了Java mail完成了给买家发送邮件的功能,还遗留一个功能,就 ...

  7. 删除N天前的备份文件脚本(windows)

    D:\bat\forfiles.exe /p "D:\dmpbk" /s /m *.dmp /d -2 /c "cmd /c del @path" 解析: 使用 ...

  8. 手写堆优化dijkstra

    \(dijkstra\) 算法的堆优化,时间复杂度为\(O(n+m)\log n\) 添加数组\(id[]\)记录某节点在堆中的位置,可以避免重复入堆从而减小常数 而这一方法需要依托手写堆 #incl ...

  9. JavaScript访问对象的属性和方法

    对象的属性和方法统称为对象的成员. 访问对象的属性 在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性. 二者区别:“ . ”表示法一般作为静态对象使用时来存取属性.而“[ ...

  10. laravel开发之-网站初建

    1 cmd 打开电脑命令窗口 2 目录切换到网站根目录 3 输入命令:php artisan serve 4 model 生成命令:php artisan make:model 需要生成的model名 ...