AngularJS 输入类似于过滤器的格式化值并删除格式以进行处理

Question

我有一个显示货币值的过滤器，它扩展了默认货币过滤器。我们的 API 将以美分存储数据，但我希望用户界面显示的价格与人们习惯使用它的方式（美元和美分）相似。

过滤器很简单，适用于普通字段，ui.Grid，等等...

/**
 * Currency Filter
 */
angular.module('myApp').filter('SLS_Currency', function($filter) {
    var CurrencyFilter = $filter('currency');
    return function(Input){
        return CurrencyFilter(Input / 100);
    };
});

这会将数字转换为美元和美分（123 变为 $1.23）。但是，我现在的问题是在输入字段的表单上使用它。我仍然希望能够控制错误检查等...，并希望该字段显示为 1.23 美元，但在编辑时允许用户键入带格式或不带格式的值？

我希望能够重新使用这个过滤器，而不一定要创建另一段代码来做同样的事情。我看到过有关 $watch 的建议，但看起来更大的表格会有很多这样的建议，然后会有一个输入指令和一个用于查看的过滤器。是否可以在过滤器内执行，或在任何地方使用该指令，包括 ui.Grid?

<form>
    <div class="form-group">
        <label>Unit Price</label>
        <input type="text" placeholder="Unit Price (cents)" ng-model="storeitem.UnitPrice | SLS_Currency" class="form-control" />
    </div>

    <div class="form-group">
        <label>Quantity</label>
        <input type="text" placeholder="Quantity (1-99)" ng-model="storeitem.nForQuantity" class="form-control" />
    </div>
</form>

Answer 1

最好使用指令来执行此操作。如果需要，您可以在指令中使用过滤器。

angular.module('slsCurrency.directive', []).directive('slsCurrency', 
    function($filter) {
      return {
        restrict: 'A',
        require: '^ngModel',
        link: function($scope, element, attrs, ngModelController) {
            var slsCurrencyFilter = $filter('SLS_Currency');

            ngModel.$formatters.push(function(value){
                return slsCurrencyFilter(value);
            });

            ngModel.$parsers.push(function(value){
                // Insert code here to detect formatting (e.g. $), strip out what you don't need, then return it.
                // This is the value that will be saved to your DB
                return value;
            });
        }
      };
    }
  );

-

    <input type="text" sls-currency placeholder="Unit Price (cents)" ng-model="storeitem.UnitPrice" class="form-control" />

AngularJS 输入类似于过滤器的格式化值并删除格式以进行处理

AngularJS Enter a Formatted value similar to a filter and remove formatting for processing

angularjs

angularjs-directive

angularjs-filter