AngularJS 过滤器，9个内置过滤器

最新推荐文章于 2020-07-21 11:20:34 发布

houyanhua1

最新推荐文章于 2020-07-21 11:20:34 发布

阅读量298

点赞数

分类专栏： AngularJS 文章标签： angularjs 过滤器内置过滤器

本文链接：https://blog.csdn.net/houyanhua1/article/details/80142148

版权

AngularJS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

过滤器：{{数据|过滤器:参数}} 格式化展示数据。 "|"相当于管道，可以通过多个"|"来同时使用多个过滤器。 ":"表示参数,多个冒号多个参数。

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AngularJS</title>
	<script src="angular.min.js"></script>  <!-- 引入AngularJS框架 -->
</head>
<body ng-app="App">
	
	<ul ng-controller="DemoController">
		<li>{{price|currency:'￥'}}</li>  <!-- {{数据|currency}} 格式化成货币 -->
		<li>{{now|date:'yyyy-MM-dd hh:mm:ss'}}</li>
		<li>{{myArr|filter:'s'}}</li>  <!-- 只输出数组中包含's'的项 -->
		<li>{{students|filter:{age:12} }}</li>  <!-- 把age为12的对象过滤出来。 如果参数是对象,需要在对象的"}"后面再加一个空格 -->
		<li>{{students|json}}</li>   <!-- 将JS对象转成JSON字符串(一般用于调试) -->
		<li>{{myArr|limitTo:2}}</li>   <!-- limitTo截取数组的前2项;-1表示最后一项 -->
		<li>{{str|uppercase}}</li>  <!-- uppercase 转成大写 -->
		<li>{{str|lowercase}}</li>  <!-- lowercase 转成小写 -->
		<li>{{num|number}}</li>  <!-- number 纯数字字符串转成数字,(默认保留3位小数) -->
		<li>{{num|number:2}}</li>  <!-- number 保留2位小数 -->
		<li>{{myArr|orderBy}}</li>  <!-- 按ask码进行排序 -->
		<li>{{myArr|orderBy:'':true}}</li>  <!-- 两个参数两个":",第二个参数表示倒序 -->
		<li>{{students|orderBy:'age':true}}</li>  <!-- 第一个参数表示按"age"排序 -->
		<li>{{str|uppercase|limitTo:3}}</li>   <!-- "|"相当于管道,可以通过多个"|"来使用多个过滤器 -->
	</ul>

	<script>
		
		var App = angular.module('App',[]);

		App.controller("DemoController",['$scope',function($scope) {
			
			$scope.price = 11.1111111;  
			$scope.now = new Date();
			$scope.myArr = ['html','css','js'];
			$scope.students = [
				{name:"张三",age:12},
				{name:"张四",age:15},
				{name:"张五",age:12}
			];
			$scope.str = "Hello";
			$scope.num = "10.666666666";

		}]);
		
	</script>
</body>
</html>

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 过滤器，9个内置过滤器

过滤器：{{数据|过滤器:参数}} 格式化展示数据。 "|"相当于管道，可以通过多个"|"来同时使用多个过滤器。 ":"表示参数,多个冒号多个参数。 demo.html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&g
复制链接

扫一扫