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实现这个场景呢?我是否遗漏了文档中的某些功能?
https://stackoverflow.com/questions/11616636
复制相似问题