2016-07-22 107 views
1

我试图能够键入美元金额(5.75)并将其转换为575并存储在数据库中,然后再次在网站上显示为5.75。美元到美分和回Angular JS

我的工作价格为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

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

DIRECTIVE

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

所以没有答案意味着它应该是工作? –

+0

5.75你会得到什么答案?你有没有尝试使用parseFloat而不是parseInt? – heliotrope

回答

0

很简单。只需将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>