Angurlar 过滤器

最新推荐文章于 2021-02-01 11:47:14 发布

心郎

最新推荐文章于 2021-02-01 11:47:14 发布

阅读量649

点赞数

分类专栏：前段_angularjs

本文链接：https://blog.csdn.net/u011301203/article/details/53225322

版权

前段_angularjs 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AngularJS 过滤器</title>
</head>
<!--
	在AngularJS中使用过滤器格式化展示数据，在“{{}}”中使用“|”来调用过滤器，使用“:”传递参数。
-->
<body ng-app="App">
	
	<ul ng-controller="DemoController">
		<li>{{price|currency:'$'}}</li>				<!-- 将数值格式化为货币格式 -->
		<li>{{now|date:'yyyy/MM/dd hh:mm:ss'}}</li>		<!-- 日期格式化，年（y）、月（M）、日（d）、
									     星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、
									     毫秒（.sss），也可以组合到一起使用 -->
		
		<li>{{items|filter:'s'}}</li>			<!-- 在给定数组中选择满足条件的一个子集，并返回一个新数组-->
		<li>{{students|filter:{age: 16} }}</li>		<!-- ，其条件可以是一个字符串、对象、函数-->
		
		<li>{{students|json}}</li>	<!-- 将Javascrip对象转成JSON字符串 -->
		<li>{{items|limitTo:-1}}</li>	<!-- 取出字符串或数组的前（正数）几位或后（负数）几位-->
		
		<li>{{str|uppercase|limitTo:3}}</li>    <!-- 将文本转换成大写格式-->
		<li>{{str|lowercase}}</li>		<!-- 将文本转换成小写格式 -->
		<li>{{num|number:2}}</li>		<!-- 将文本转换成大写格式 -->
		
		<li>{{items|orderBy: '':true}}</li>		<!-- 数字格式化，可控制小位位数-->
		<li>{{students|orderBy: 'age': false}}</li>	<!-- 对数组进行排序，第2个参数可控制方向 -->
	</ul>

	<script src="../libs/angular.min.js"></script>
	<script>
		var App = angular.module('App', []);

		App.controller('DemoController', ['$scope', function ($scope) {

			$scope.price = 11.11; 

			$scope.now = new Date;

			$scope.items = ['html', 'css', 'js'];

			$scope.students = [
				{name: '马超', age: 16},
				{name: '许褚', age: 16},
				{name: '张辽', age: 10}

			];

			$scope.str = 'hello Angular';

			$scope.num = '10.2345';

		}]);

	</script>
</body>
</html>

心郎

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angurlar 过滤器

AngularJS 过滤器 {{price|currency:'$'}} {{now|date:'yyyy/MM/dd hh:mm:ss'}} <!-- 日期格式化，年（y）、月（M）、日（d）、星期（EEEE
复制链接

扫一扫

专栏目录