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>

时间： 2024-10-12 21:35:09

angularJs的过滤器的相关文章

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

1.切换目录,启动项目 git checkout step-9 npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3.效果: 4.代码实现: 这里主要是使用filter过滤器来进行数据过滤,这里只是在前端进行数据过滤,原始数据是不发生变化的. $filter:Filters are used for formatting data displayed to the user,格式化要显示的数据. 用法: {{ expres

AngularJs自定义过滤器filter

AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点,创建一个过滤器,例子中的过滤器是实现一个数值的平方. 以上的所指的App,控制器和过滤器均是依Angularjs而言. 下面是ASP.NET MVC的视图,实现数据过滤: 程序运行结果:

angularJS的过滤器！

angularJS过滤器: filter currency date filter json limitTo lowercase number orderBy uppercase ...... Filter过滤器: 过滤器的主要用途就是一个格式化 / 筛选数据的小工具: 一般用于服务端存储的数据转换为用户界面可以理解的数据: 常见需要使用Filter的数据有: - 时间 1288323623006 currency:它是用来过滤货币: 作用把数字过滤成一个货币: 使用:竖杠+过滤器名称 <di

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

时间 2013-12-15 16:22:00 博客园-原创精华区原文 http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).

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

AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化.你可以向下面这样使用链式的过滤器来传递表达式: name | uppercase 这个表达式执行时会将name的值传递给uppercase过滤器. 写一个你自己的过滤器非常容易:在你的模块中注册一个新的过滤器(可注入的)工厂函数就行了.这个工厂函数必须返回一个新的过滤器函数,这个过滤函数的第一个参

AngularJS 自定义过滤器Filter 问题

在网上看了很多angularJS过滤器的文章,但是觉得写的比较模糊,之前试了好几次都不成功,这次成功了记录一下. App.filter('deployFilter',function(){ return function(value){ switch (value){ case 'UNDEPLOY' : value = '未部署'; break; case 'DEPLOYED' : value = '已部署'; break; default : break; } return value; }

AngularJs(八) 过滤器filter创建

大纲示例过滤器的使用创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constant("productsUrl", "http://localhost:27017/products") .controller("defaultCtrl", function ($scope, $http, productsUrl) { $http.

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

Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): <tr ng-repeat="friend in friends |myfilter:'param1':'param2':true:'windowScopedFilter'"> 我们的自定义过滤器叫做 "myfilter", 它有由 ':'隔开的4个参数. 这是

AngularJS之过滤器

AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可以对字符串中的每个字符都单独进行转换操作,也可以使用过滤器: {{ name | uppercase }} 在JavaScript代码中可以通过$filter来调用过滤器.例如,在JavaScript代码中使用lowercase过滤器: app.controller('DemoController'

AngularJS 之过滤器 Filter

一.内置过滤器 1.大小写转换: uppercase.lowercase {{"lower cap string"| uppercase }} {{"Tank Is GOOD"| lowercase}} 2.json格式化(将对象转换成json字符串),默认输出就是json字符串: {{ {name:'zhangsan',age:15} }} {{ {name:'zhangsan',age:15}|json }} 3.number格式化: {{1.2345|numb