Javascript 如何将数字显示在小数点后2位，而将其存储在小数点后4位

我正在做一个项目，我们需要做一些精确的数字计算 但我们也必须以良好的格式向用户显示数字

下面是HTML代码

---

{{getTotalStocksValue（）}}%
再分配

我们显示一些股票及其价值，并且可以手动更改股票的价值。 我们使用

getTotalStocksValue（）

函数显示范围内股票价值的总和。 “重新分配”按钮将重新分配股票价值，使总价值达到100%

要求在输入中以2位小数显示库存值 但是我们也应该将股票值保留在4个小数点中，因为我们需要它来在

getTotalStocksValue

函数中执行更精确的计算。 例如，如果我们有3只股票，每只股票的价值为33.33 总数为99.99，而如果用户将每个股票的股票值更改为33.3333，则总数应四舍五入为100（如果为99.9999）。 我不知道在Angular中实现这一点是否可行。 我唯一的想法是将输入中的值显示为小数点后4位，并将它们显示为小数点后2位的span或div。

---

有什么想法或建议吗？

只需使用官方语言即可

yourname | number:'1.2-2'

将始终显示至少一个整数位的数字，并且始终显示两个小数

尝试使用

let parsedValue = parseFloat(number).toFixed(4);

现在，数字中的值将四舍五入到小数点后4位，并使用角度十进制管道在视图中显示“数字”

number | number:'1.2-2' 

---

希望这有帮助

我认为它需要一个指令，将值作为副本处理

您可以将

替换为上面的

标记，其中插入了本地固定小数

ng模型

：

<div ng-repeat="stock in stocks">
  <stock-value value="stock.value"></stock-value>
</div>

指令：

.directive('stockValue', function($compile) {
   return {
     restrict: 'E',
     template: '<input type="text" data-numeric-input-directive>',
     replace: true,
     scope: {
       value: '='
     },
     controller: function($scope) {
       $scope.localModel = undefined
     },
     link: function link(scope, element, attrs) {
       scope.localModel = parseFloat(scope.value || 0).toFixed(2);
       if (!element.attr('ng-model')) {
         element.attr('ng-model', 'localModel');
         $compile(element)(scope);
       }
       scope.$watch('localModel', function(newVal, oldVal) {
         if (!oldVal || newVal === oldVal) return
         scope.value = parseFloat(newVal).toFixed(4);
       })
     }
   }
});

指令（'stockValue'，函数（$compile）{
返回{
限制：'E'，
模板：“”，
替换：正确，
范围：{
值：'='
},
控制器：功能（$scope）{
$scope.localModel=未定义
},
链接：功能链接（范围、元素、属性）{
scope.localModel=parseFloat（scope.value | | 0）.toFixed（2）；
如果（！element.attr（'ng-model'））{
attr（'ng-model'，'localModel'）；
$compile（元素）（范围）；
}
作用域：$watch（'localModel'，函数（newVal，oldVal）{
如果（！oldVal | | newVal==oldVal）返回
scope.value=parseFloat（newVal）.toFixed（4）；
})
}
}
});

请参见此链接

---

用户看到一个两位小数的固定值，原始值不会被截断，但如果用户输入一个新值，旧值将被覆盖到最多4位小数

尝试使用筛选器

{{getTotalStocksValue（）| number:2}}

（或具有特定规则的自定义筛选器），它在此处重复：[他希望以2位小数显示ng模型值，但希望以4位小数保存。管道不会修改实际值，因此将始终以其拥有的小数位数保存。唯一改变的是显示方式

.directive('stockValue', function($compile) {
   return {
     restrict: 'E',
     template: '<input type="text" data-numeric-input-directive>',
     replace: true,
     scope: {
       value: '='
     },
     controller: function($scope) {
       $scope.localModel = undefined
     },
     link: function link(scope, element, attrs) {
       scope.localModel = parseFloat(scope.value || 0).toFixed(2);
       if (!element.attr('ng-model')) {
         element.attr('ng-model', 'localModel');
         $compile(element)(scope);
       }
       scope.$watch('localModel', function(newVal, oldVal) {
         if (!oldVal || newVal === oldVal) return
         scope.value = parseFloat(newVal).toFixed(4);
       })
     }
   }
});