AngularJS number过滤器详解及示例

作者 : 慕源网 本文共1068个字,预计阅读时间需要3分钟 发布时间: 2022-05-5 共387人阅读

AngularJS number过滤器AngularJS中的 number过滤器用于将数字转换为字符串或文本。我们还可以定义一个限制来显示小数位数。number过滤器将数字四舍五入到指定的十进制数字。

语法:

{{ string| number : fractionSize}}

参数值:它包含单个参数值fractionsize,它是数字类型,用于指定小数位数。

示例 1:格式化数字并将其设置为带两位小数的分数。

<!DOCTYPE html>
<html>
	<head>
		<title>Number Filter</title>
		
		<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
		</script>
	</head>
	
	<body>

		<div ng-app="gfgApp" ng-controller="numberCntrl">
			<h3>Number filter with fraction size.</h3>
			<p>Number : {{ value| number : 2}}</p>
		</div>

		<script>
			var app = angular.module('gfgApp', []);
			app.controller('numberCntrl', function($scope) {
				$scope.value = 75598.548;
			});
		</script>

	</body>
</html>

输出:

示例 2:格式化数字并将其设置为小数点后三位的分数。

<!DOCTYPE html>
<html>
	<head>
		<title>Number Filter</title>
		
		<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
		</script>
	</head>
	
	<body>

		<div ng-app="gfgApp" ng-controller="numberCntrl">
			<h3>Number filter without fraction size.</h3>
			<p>Number : {{ value| number}}</p>
		</div>

		<script>
			var app = angular.module('gfgApp', []);
			app.controller('numberCntrl', function($scope) {
				$scope.value = 524598.54812;
			});
		</script>

	</body>
</html>

输出:


慕源网 » AngularJS number过滤器详解及示例

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录