angularJs的过滤器

一、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的过滤器的更多相关文章

AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...
AngularJS开发指南13：AngularJS的过滤器详解
AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...
走进AngularJs(七) 过滤器（filter） - 吕大豹
时间 2013-12-15 16:22:00 博客园-原创精华区原文 http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...
AngularJs(八) 过滤器filter创建
大纲示例过滤器的使用创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...
创建 AngularJS 自定义过滤器，带自定义参数
Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...
AngularJs自定义过滤器filter
AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点 ...
AngularJS之过滤器
AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可 ...
angularJS的过滤器！
angularJS过滤器: filter currency date filter json limitTo lowercase number orderBy uppercase ...... Fil ...
AngularJS：过滤器
ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤 ...
AngularJS 五过滤器及验证
AngularJS过滤: AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式. 格式: 一些比较重要的过滤器: Number Filter ...

随机推荐

iOS开源项目周报0223
由OpenDigg 出品的iOS开源项目周报第九期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等.panelkit ...
jquery操作radio单选按钮，实现取值，动态选中，动态删除的各种方法
本文主要讲的是在jquery里操作表单radio单选按钮的各种方法,如获取选中的radio的值,动态选中指定的radio项等. 1.获取选中的radio单选按钮的值: var v=$(":r ...
DataGridView 单元格自动填充
在DataGridView单元格中,当输入指定字符时,自动完成填充. 通过 TextBox实现 AutoCompleteMode AutoCompleteMode.Suggest: AutoCompl ...
DataGrridView 当前行显示不同颜色
如果想让选中DataGridview的行显示不同颜色,就要通过DataGridview控件RowPerpaint事件中重新设置所选行的DefauleCellStyle属性来实现 private voi ...
C# 文件上传制作水印
其实C#的文件上传是非常简单的前台代码 <asp:FileUpload ID="FileUpload1" accept=".jpg,.png,.jpeg" ...
Java学习--使用 Math 类操作数据
使用 Math 类操作数据 Math 类位于 java.lang 包中,包含用于执行基本数学运算的方法, Math 类的所有方法都是静态方法,所以使用该类中的方法时,可以直接使用类名.方法名,如: M ...
Java基础——String
前言从去年八月末开始工作一年了,有了大半年的java开发经验,自认为比在大学时期编码能力强了很多,但是基础方面概念模糊的地方感觉越来越多了 (:´д｀)ゞ所以,我准备把这些问题以及工作中遇到的问题 ...
uestc 1072 a ^ b
a ^ b Time Limit: 1000 ms Memory Limit: 65535 kB Solved: 334 Tried: 2153 Description 求a的b次方后四位. In ...
Spring与Web
一.定义页面及Servlet 在jsp页面加入以下,避免乱码 <meta charset="utf-8"> <body> <form action=& ...
Java 类 ThreadLocal 本地线程变量
前言:工作中将要使用ThreadLocal,先学习总结一波.有不对的地方欢迎评论指出. 定义 ThreadLocal并不是一个Thread,而是Thread的局部变量.这些变量不同于它们的普通对应物, ...

angularJs的过滤器

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

随机推荐

热门专题