AngularJS 输入一个类似于过滤器的格式化值并删除格式进行处理 [英] AngularJS Enter a Formatted value similar to a filter and remove formatting for processing

问题描述

我有一个用于显示货币值的过滤器，它扩展了默认货币过滤器.我们的 API 将以美分存储数据，但我希望用户界面显示类似于人们使用它的方式(美元和美分)的价格.

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

/*** 货币过滤器*/angular.module('myApp').filter('SLS_Currency', function($filter) {var CurrencyFilter = $filter('currency');返回函数(输入){返回货币过滤器(输入/100)；};});

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

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

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

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

</表单>

解决方案

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

angular.module('slsCurrency.directive', []).directive('slsCurrency',功能($过滤器){返回 {限制:'A'，要求:'^ngModel'，链接:函数($scope，元素，属性，ngModelController){var slsCurrencyFilter = $filter('SLS_Currency');ngModel.$formatters.push(function(value){返回 slsCurrencyFilter(value);});ngModel.$parsers.push(function(value){//在此处插入代码以检测格式(例如 $)，去掉不需要的部分，然后返回.//这是将保存到您的数据库的值返回值；});}};});

-

I have a filter for showing currency values that extended the default currency filter. Our API will store data in cents, but I want the User Interface to show the price similar to how people are use to working with it (dollars and cents).

The filter is straight forward, and works on normal fields, ui.Grid, etc...

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

This converts the number to Dollars and Cents (123 becomes $1.23). However, my problem is now using this on a form in the input field. I want to be able to still control error checking, etc..., and want the field to display as $1.23, but when editing allow the user to type a value with or without formatting?

I am looking to be able re-use this filter, not necessarily create another piece of code to do the same thing. I have seen suggestions with $watch, but it appears a larger form would have a number of these, and then there would be a directive for input, and a filter for viewing. Is it possible to do within the filter, or to use the directive everywhere, including 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>

解决方案

It would be best to use a directive to do this. You can use your filter within the directive if you want.

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 输入一个类似于过滤器的格式化值并删除格式进行处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！