首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在AngularJS中进行双向过滤?

如何在AngularJS中进行双向过滤?
EN

Stack Overflow用户
提问于 2012-07-24 00:31:10
回答 1查看 42.9K关注 0票数 124

AngularJS可以做的一件有趣的事情是对特定的数据绑定表达式应用过滤器,这是一种方便的方法,例如,应用特定于文化的货币或模型属性的日期格式。在作用域上有计算属性也很好。问题是这两个特性都不适用于双向数据绑定场景--只有从作用域到视图的单向数据绑定。

KnockoutJS中,我可以创建一个读/写计算属性,它允许我指定一对函数,其中一个函数被调用来获取属性的值,另一个函数在设置属性时被调用。例如,这允许我实现文化感知输入-让用户输入"$1.24“并将其解析为ViewModel中的浮点数,并将ViewModel中的更改反映在输入中。

我能找到的与此最相似的是$scope.$watch(propertyName, functionOrNGExpression);的使用,它允许我在$scope中的属性发生变化时调用一个函数。但是,例如,这并不能解决文化感知的输入问题。请注意,当我尝试修改$watch方法本身中的$watched属性时出现的问题:

代码语言:javascript
复制
$scope.$watch("property", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.property = Globalize.parseFloat(newValue);
});

(http://jsfiddle.net/gyZH8/2/)

当用户开始输入时,input元素会变得非常混乱。

代码语言:javascript
复制
$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实现这个场景呢?我是否遗漏了文档中的某些功能?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11616636

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档