angularjs 格式数字千位分隔符

📌 相关文章

📜 angularjs 格式数字千位分隔符 - Javascript (1)

📅 最后修改于: 2023-12-03 15:29:24.369000 🧑 作者: Mango

在使用AngularJS开发Web应用时，我们经常会需要格式化数字。其中，将数字用千位分隔符进行格式化往往是一种比较常见的需求。本文将介绍如何使用AngularJS来实现数字千位分隔符的格式化。

实现方式

AngularJS提供了一个内置的过滤器（filter）——number，可以将数字格式化为带有千位分隔符的字符串。该过滤器有三个参数，分别为：格式化后小数的位数、小数点的符号、千位分隔符的符号。例如：

{{ myNumber | number:2 }}

上述代码可以将数字myNumber格式化为带有两位小数和千位分隔符的字符串。格式化后的字符串将在视图中显示。

示例

以下是一个使用number过滤器来格式化数字的示例：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Number Format Filter Demo</title>
</head>
<body>
    <div ng-controller="MyCtrl">
        <h1>AngularJS Number Format Filter Demo</h1>
        <p>未格式化的数字：{{ myNumber }}</p>
        <p>格式化后的数字：{{ myNumber | number:2 }}</p>
    </div>
    <script src="https://cdn.bootcss.com/angular.js/1.7.9/angular.min.js"></script>
    <script>
        angular.module('myApp', [])
        .controller('MyCtrl', ['$scope', function($scope) {
            $scope.myNumber = 1234567.89;
        }]);
    </script>
</body>
</html>

代码片段：

```html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Number Format Filter Demo</title>
</head>
<body>
    <div ng-controller="MyCtrl">
        <h1>AngularJS Number Format Filter Demo</h1>
        <p>未格式化的数字：{{ myNumber }}</p>
        <p>格式化后的数字：{{ myNumber | number:2 }}</p>
    </div>
    <script src="https://cdn.bootcss.com/angular.js/1.7.9/angular.min.js"></script>
    <script>
        angular.module('myApp', [])
        .controller('MyCtrl', ['$scope', function($scope) {
            $scope.myNumber = 1234567.89;
        }]);
    </script>
</body>
</html>



### 总结

使用AngularJS的内置过滤器，可以很方便地实现数字千位分隔符的格式化，避免了在代码中手动对数字进行格式化的繁琐操作。同时，过滤器的参数可以根据需求进行灵活的设置，以满足不同的格式化需求。