javascript - 如何在小数点后 2 位显示数字，但在 Angular 中将其存储在小数点后 4 位

Question

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

这是HTML代码

---

 <span> {{ getTotalStocksValue() }} %</span>   
    <button data-ng-click="redistribute()">Redistribute</button>
    <form action="">
        <input type="text" data-numeric-input-directive   data-ng-repeat="stock in stocks" data-ng-model="stock.value">
    </form>

我们显示一些股票及其值(value)，并且可以手动更改股票的值(value)。我们使用 getTotalStocksValue() 函数显示跨度内的股票总值。重新分配按钮重新分配股票值(value)，因此总值(value)将为 100%。

要求以小数点后两位显示输入中的股票值但我们还应该将股票值保留在小数点后 4 位，因为我们需要它在 getTotalStocksValue 函数中执行更准确的计算。例如，如果我们有 3 只股票，每只股票的值(value)为 33.33总数为 99.99，而如果用户将每只股票的股票值(value)更改为 33.3333，则如果总数为 99.9999，则总数应四舍五入为 100。我不知道在 Angular 中是否可以实现这个。我唯一的想法是将输入中的股票值显示为小数点后 4 位，并将它们显示在小数点后 2 位的 span 或 div 中。有什么想法或建议吗？

Answer 1

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

你可以有一个 <stock-value value="stock.value"></stock-value>替换为上面的 <input>本地固定小数 ng-model 的标记被注入(inject):

<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);
       })
     }
   }
});

查看这个 plunkr -> http://plnkr.co/edit/P9uHZwTzgK9mJkRHRrl9?p=preview

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