丸めなしのAngularJS通貨/数値出力

Question

丸めを行わずに通貨/数値入出力を作成しようとしています。

私が通貨を使用して遭遇する問題は、（1）3番目の数字が入力されると2番目の小数点を丸め、（2）3番目の数字を入力できるようにすることです。 del（）関数に気付いた場合は、数値の最後が削除されますが、表示は$ 27.46です。文字列は実際には27.45606020になる可能性があり、バックスペースはユーザーが見ることのできない数字を削除します。

現時点では、AngularJSの通貨や数字を気にせずに、小数点以下2桁までの桁数を防ぐフィルタを使用するハッキーコードもあります。一度追加する。

{{checkTotal | dropDigits}

.filter('dropDigits', function() { 
    return function(floatNum) { 
     return String(floatNum) 
      .split('.') 
      .map(function (d, i) { return i ? d.substr(0, 2) : d; }) 
      .join('.'); 
    }; 
}) 

.controller('tipController', function($scope) { 

    // Numpad 
    $scope.checkTotal = '0.00'; 

    $scope.clicked = function (label) { 
    if($scope.checkTotal === '0.00') { 
     $scope.checkTotal = label; 
    } else { 
     $scope.checkTotal += label; 
    } 
    }; 

    // Prevent multiple decimals 
    $scope.clickedDot = function() { 
     if (($scope.checkTotal.indexOf('.') < 0) || ($scope.checkTotal === '0.00')) { 
     if (($scope.checkTotal === '0.00') || ($scope.checkTotal === '')) { 
      $scope.checkTotal = '0.'; 
     } else { 
      $scope.checkTotal += '.'; 
     } 
     } 
    }; 

    $scope.del = function() { 
     $scope.checkTotal = $scope.checkTotal.slice(0, -1); 
    }; 

}); 

Answer 1

ユーザーが唯一のあなたの例では、それは読み込み、「5」または$ .05言うで入れた場合、私は声明

$scope.clicked = function(label) { 
    if ($scope.checkTotal === '0.00') { 
    $scope.checkTotal = label; 
    } else { 
    if (($scope.checkTotal.indexOf('.') != -1) && ($scope.checkTotal.substring($scope.checkTotal.indexOf('.')).length > 2)) { //if there is a decimal point, and there are more than two digits after the decimal point 
     label.preventDefault(); 
    } else { 
     $scope.checkTotal += label; 
    } 
    } 
}; 

Answer 2

Math.floorを使用して、小数点以下を丸めずに丸めることができます。 floorの値に100を掛けて、必要な数学を内部で行い、その後、正しい結果サイズを得るために100で割ります。

以下のデモまたはfiddleをご覧ください。

angular.module('demoApp', []) 
 
\t .controller('mainController', MainController); 
 
    
 
function MainController($timeout) { 
 
\t var vm = this; 
 
    
 
    angular.extend(vm, { 
 
    \t input: 10.25, 
 
     total: 0, 
 
     calcTip: function() { 
 
     \t // 10% tip // 2 decimal places no rounding. 
 
      // floor calc. from this SO answer 
 
      // http://stackoverflow.com/questions/4187146/display-two-decimal-places-no-rounding 
 
      vm.total = Math.floor(vm.input * 1.1 * 100)/100; 
 
     } 
 
    }); 
 
    
 
    vm.calcTip(); // initial calc. 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demoApp" ng-controller="mainController as mainCtrl"> 
 
    <input ng-model="mainCtrl.input" ng-change="mainCtrl.calcTip()"/> 
 
    <br/> 
 
    <strong>{{mainCtrl.total | currency}}</strong> 
 
</div>