在AngularJS中使用过滤器格式化展示数据，在“{{}}”中使用“|”来调用过滤器，使用“:”传递参数。
1、内置过滤器
-
currency:将数值格式化为货币格式
<body ng-app="app">
<ul ng-controller="DemoController">
<li>默认为美元符号：{{price|currency}}</li>
<li>用冒号传值￥：{{price|currency:'￥'}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.price = 11.11;
}])
</script>
</body>
将数值格式化为货币
-
date：日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。
<body ng-app="app">
<ul ng-controller="DemoController">
<li>时间：{{now|date:'yyyy-MM-dd h:mm:ss '}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.now = new Date();
}])
</script>
</body>
格式化时间
-
filter：在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数
<body ng-app="app">
<ul ng-controller="DemoController">
<!--过滤出items数组中含有s的字符串-->
<li>{{items|filter:'s'}}</li>
<!--过滤出年龄为20的人-->
<li>{{student|filter:{age:20} }}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.items = ['html','js','jq','css','student'];
$scope.student = [
{name:'小明',age:19},
{name:'小李',age:20},
{name:'张三',age:20}
]
}])
</script>
</body>
过滤字符串和对象
-
json:将Javascrip对象转成JSON字符串
<body ng-app="app">
<ul ng-controller="DemoController">
<li>转化为json对象：{{student|json}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.student = [
{name:'小明',age:19},
{name:'小李',age:20},
{name:'张三',age:20}
]
}])
</script>
</body>
转化为json
-
limitTo:取出字符串或数组的前（正数）几位或后（负数）几位
<body ng-app="app">
<ul ng-controller="DemoController">
<li>截取数组items的第一个和最后一个元素：{{items|limitTo:1}}，{{items|limitTo:-1}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.items = ['html','js','jq','css','student'];
}])
</script>
</body>
Paste_Image.png
-
lowercase:将文本转换成小写格式,uppercase:将文本转换成大写格式
<body ng-app="app">
<ul ng-controller="DemoController">
<li>将str2转化为小写：{{str2|lowercase}}</li>
<li>将str1转化为大写：{{str1|uppercase}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.str1 = 'ddddddddddddhello';
$scope.str2 = 'HELLODDDDDDDDDDDDDDDDDDDDDDDDDDDD';
}])
</script>
</body>
字符串大小写转化
-
number：数字格式化，可控制小位位数
<body ng-app="app">
<ul ng-controller="DemoController">
<!--将str3转化为数字，并保留四位小数-->
<li>{{str3|number:4}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.str3 = '45678.22'
}])
</script>
</body>
Paste_Image.png
-
orderBy:对数组进行排序，第2个参数可控制方向
<body ng-app="app">
<ul ng-controller="DemoController">
<li>{{items|orderBy:'':true}}</li>
<!--如果数组中村的时对象的话，可以按照某个属性值排序，true是降序，false是升序-->
<li>{{student|orderBy:'age':true}}</li>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",['$scope',function ($scope) {
$scope.items = ['html','js','jq','css','student'];
$scope.student = [
{name:'小明',age:19},
{name:'小李',age:20},
{name:'张三',age:20}
]
}])
</script>
</body>
Paste_Image.png
2、自定义过滤器
当我们内置的过滤器不能满足我们的需求时，我们可以自定义过滤器，AngularJs也支持自定义过滤器。
app.filter('capitalize',function () {
return function () {
}
});
使用app.filter()方法 自定义过滤器，其中两个参数，一个表示过滤器的名称，一个表示返回的函数，接下来，写一个小Demo来定义一个把英文字符串首字母转化为大写的过滤器。
<body ng-app="app">
<ul ng-controller="demoController">
<h4>将首字母转化为大写：{{info|capitalize}}</h4>
</ul>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
// 定义过滤器，第一个参数表示过滤器的名称
app.filter('capitalize',function () {
return function (input) {
// 将字符串的第一个字母变为大写
return input[0].toUpperCase()+input.slice(1)
}
});
app.controller("demoController",["$scope",function ($scope) {
$scope.info ="my name is huangsen";
}])
</script>
</body>
在这里需要传递一个input参数来接收，本来过滤器的哪个竖线就是相当于一个管道，这里的input就相当于传递过来的内容。
网友评论