如何以角度显示ng-model输入值作为货币？

Question

我有html

<input type="text" ng-model="price" >

<h2>{{ price | currency}}</h2>

在控制器中

$scope.price = 10;   
Which displays   **$10** in h1 if i change the value in price model input.

我希望文本框输入为货币(输入框中的$ 10作为值).怎么做到这一点？

Answer 1

您可以尝试使用格式化和解析器像

app.directive('currency', function () {
    return {
        require: 'ngModel',
        link: function(elem, $scope, attrs, ngModel){
            ngModel.$formatters.push(function(val){
                return '$' + val
            });
            ngModel.$parsers.push(function(val){
                return val.replace(/^\$/, '')
            });
        }
    }
})

然后

<input type="text" ng-model="price" currency>

演示:小提琴