javascript - 使用 Angular JS 将美元转换为美分并返回

Question

我试图输入美元金额 (5.75) 并将其转换为 575 并存储在数据库中，然后再次在网站上显示为 5.75。

我有的东西只要 5.00 美元就能用，但不能用 5.75 美元。我所拥有的如下。

HTML

<input type="number" class="form-control" ng-model="admin.singleInfo.pricing.cost" monetary-input ng-change="admin.calculateSell(admin.singleInfo.$id); admin.singleInfo.$save();changesSaved()"/>

过滤器

.filter('MonetaryUnit', function () { 
    return function (amount) {
        return (amount / 100).toFixed(2); 
    } 
})

指令

directive('monetaryInput', function($filter, $browser) {
    return {
        require: 'ngModel',
        link: function($scope, $element, $attra, ngModelCtrl) {
            var listener = function() {
                $element.val($filter('MonetaryUnit')(value, false));
            };

            ngModelCtrl.$parsers.push(function(viewValue) {
                return Math.round(parseInt(viewValue) * 100);
            });

            ngModelCtrl.$render = function() {
                $element.val($filter('MonetaryUnit')(ngModelCtrl.$viewValue, false));
            }

            $element.bind('change', listener);
        }
    }
})

Answer 1

很简单。只需将 parseInt 更改为 parseFloat。请参阅下面的工作示例:

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {

});

app.filter('MonetaryUnit', function() {
  return function(amount) {
    return (amount / 100).toFixed(2);
  }
});

app.directive('monetaryInput', function($filter, $browser) {
  return {
    require: 'ngModel',
    link: function($scope, $element, $attra, ngModelCtrl) {
      var listener = function() {
        $element.val($filter('MonetaryUnit')(value, false));
      };

      ngModelCtrl.$parsers.push(function(viewValue) {
        return Math.round(parseFloat(viewValue) * 100);
      });

      ngModelCtrl.$render = function() {
        $element.val($filter('MonetaryUnit')(ngModelCtrl.$viewValue, false));
      }

      $element.bind('change', listener);
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="sa" ng-controller="FooController">
  <input type="text" ng-model="amount" monetary-input />

  <br>Model value: {{amount}}
</div>