AngularJS输入类似过滤器的格式化值，并删除格式进行处理 [英] AngularJS Enter a Formatted value similar to a filter and remove formatting for processing
问题描述
我有表明扩展默认货币滤波器货币值的过滤器。我们的API将数据存储在美分，但我想要的用户界面以显示类似于人们是如何使用与它（美元和美分）工作的价格。
该过滤器是直线前进，并工作在正常领域，ui.Grid，等等...
/ **
*货币过滤器
* /
angular.module（'对myApp'）。过滤器（'SLS_Currency'，函数（$过滤器）{
VAR CurrencyFilter = $过滤器（货币）;
复位功能（输入）{
返回CurrencyFilter（输入/ 100）;
};
}）;
此转换为美元和美分（123变为$ 1.23）的数量。不过，我的问题是现在使用该输入字段的表单上。我希望能够仍然控制错误检查，等等，并希望该字段显示为$ 1.23，但编辑让用户有或无格式键入一个值是什么时候？
我期待能够再次使用此过滤器，并不一定创造另一片code做同样的事情。我已经看到了$手表的建议，但它似乎一个更大的形式将有许多这些，然后会有输入指令，以及观看一个过滤器。是否有可能在过滤器内呢，还是到处使用的指令，包括ui.Grid？
＆LT;形式为GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT;标签＆gt;单价＆LT; /标签＆gt;
＆LT;输入类型=文本占位符=单价（分）NG模型=storeitem.UnitPrice | SLS_Currency级=表格控/＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =表单组＆GT;
＆LT;标签＆gt;＆数量LT; /标签＆gt;
＆LT;输入类型=文本占位符=数量（1-99）NG模型=storeitem.nForQuantity级=表格控/＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
这将是最好使用指令做到这一点。如果你想你可以在指令中使用的过滤器。
angular.module（'slsCurrency.directive'，[]）。指令（slsCurrency'，
功能（$过滤器）{
返回{
限制：'A'，
要求：'^ ngModel'，
链接：功能（$范围，元素，ATTRS，ngModelController）{
变种slsCurrencyFilter = $滤波器（'SLS_Currency'）; ngModel。$ formatters.push（函数（值）{
返回slsCurrencyFilter（值）;
}）; ngModel。$ parsers.push（函数（值）{
//将$ C $这里C到检测的格式（例如$），去掉你不需要的东西，然后返回。
//这是将被保存到您的数据库的价值
返回值;
}）;
}
};
}
）;
-
＆LT;输入类型=文本SLS货币占位=单价（分）NG模型=storeitem.UnitPrice级=表格控/＆GT ;
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屋！
