如何在AngularJS中进行双向过滤？
AngularJS可以做的一件有趣的事情是对特定的数据绑定表达式应用过滤器，这是一种方便的方法，例如，应用特定于文化的货币或模型属性的日期格式。在作用域上有计算属性也很好。问题是这两个特性都不适用于双向数据绑定场景--只有从作用域到视图的单向数据绑定。
在KnockoutJS中，我可以创建一个读/写计算属性，它允许我指定一对函数，其中一个函数被调用来获取属性的值，另一个函数在设置属性时被调用。例如，这允许我实现文化感知输入-让用户输入"$1.24“并将其解析为ViewModel中的浮点数，并将ViewModel中的更改反映在输入中。
我能找到的与此最相似的是$scope.$watch(propertyName, functionOrNGExpression);的使用，它允许我在$scope中的属性发生变化时调用一个函数。但是，例如，这并不能解决文化感知的输入问题。请注意，当我尝试修改$watch方法本身中的$watched属性时出现的问题：
$scope.$watch("property", function (newValue, oldValue) {
$scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
$scope.property = Globalize.parseFloat(newValue);
});(http://jsfiddle.net/gyZH8/2/)
当用户开始输入时，input元素会变得非常混乱。
$scope.visibleProperty= 0.0;
$scope.hiddenProperty = 0.0;
$scope.$watch("visibleProperty", function (newValue, oldValue) {
$scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
$scope.hiddenProperty = Globalize.parseFloat(newValue);
});(http://jsfiddle.net/XkPNv/1/)
这是对第一个版本的改进，但有点冗长，请注意，作用域更改的parsedValue属性仍然存在问题(在第二个输入中输入一些内容，这将直接更改parsedValue。请注意，顶部输入没有更新)。这可能发生在控制器操作或从数据服务加载数据时。
有没有更简单的方法来使用AngularJS实现这个场景呢？我是否遗漏了文档中的某些功能？
回答 1
Stack Overflow用户
发布于 2012-10-18 13:55:17
事实证明，有一个非常优雅的解决方案，但它没有很好的文档记录。
格式化用于显示的模型值可由|运算符和角度formatter处理。事实证明，ngModel不仅有一个格式化程序列表，而且还有一个解析器列表。
1.使用ng-model创建双向数据绑定
<input type="text" ng-model="foo.bar"></input>2.在angular模块中创建一个指令，该指令将应用于相同的元素，并依赖于ngModel控制器
module.directive('lowercase', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ngModel) {
...
}
};
});3.在link方法中，向ngModel控制器添加自定义转换器
function fromUser(text) {
return (text || '').toUpperCase();
}
function toUser(text) {
return (text || '').toLowerCase();
}
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);4.将新指令添加到已具有ngModel的同一元素中
<input type="text" lowercase ng-model="foo.bar"></input>下面是一个在input中将文本转换为小写，并在模型中将文本转换回大写的working example
Model Controller的API文档还提供了对其他可用方法的简要说明和概述。
https://stackoverflow.com/questions/11616636
复制相似问题