如何在AngularJS中进行双向过滤？

AngularJS可以做的一件有趣的事情是对特定的数据绑定expression式应用filter，这是一种方便的方式来应用，例如，特定于文化的货币或模型属性的date格式。 在范围上计算属性也很好。 问题是这些function都不适用于双向数据绑定场景 – 从范围到视图只有单向数据绑定。 这似乎是在一个优秀的图书馆明显的遗漏 – 或者我错过了什么？

在KnockoutJS中 ，我可以创build一个读/写计算属性，它允许我指定一对函数，一个被调用来获取属性的值，另一个在属性被设置时被调用。 这允许我实现文化感知input – 让用户input“$ 1.24”并将其parsing为ViewModel中的float，并在input中反映ViewModel中的变化。

我可以find类似的最接近的是使用$scope.$watch(propertyName, functionOrNGExpression); 这允许我在$scope中的一个属性发生变化时调用一个函数。 但是，这并不能解决文化意识的input问题。 注意当我尝试修改$watch方法本身内的$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时，input元素会变得非常困惑。 我通过将属性分成两个属性来改进它，一个用于parsing值，另一个用于parsing值：

 $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属性的问题（在第二个input中键入某个东西，直接更改parsedValue 。不更新）。 这可能发生在控制器操作或从数据服务加载数据。

有没有更简单的方法来使用AngularJS来实现这个场景？ 我是否缺less文档中的一些function？

Answer 1

事实certificate，这是一个非常优雅的解决scheme，但没有很好的文档。

格式化显示的模型值可以由|处理 运算符和angular度formatter 。 事实certificate，ngModel不仅有一个格式化列表，而且还有一个parsing器列表。

1.使用ng-model创build双向数据绑定

 <input type="text" ng-model="foo.bar"></input> 

2.在您的angular度模块中创build一个指令，该指令将被应用于相同的元素，并依赖于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中的文本转换为小写，并将模型中的文本转换为大写

模型控制器的API文档还提供了其他可用方法的简要说明和概述。