相关疑难解决方法(0)

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

AngularJS可以做的一件有趣的事情是将过滤器应用于特定的数据绑定表达式,这是一种应用的便捷方式,例如,特定于文化的货币或模型属性的日期格式.在范围上计算属性也很好.问题是这些功能都不适用于双向数据绑定方案 - 只是从范围到视图的单向数据绑定.这在一个优秀的图书馆中似乎是一个明显的遗漏 - 或者我错过了什么?

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

我能找到的最接近的东西是使用$scope.$watch(propertyName, functionOrNGExpression);这个允许我在$scope更改属性时调用一个函数.但这并不能解决例如文化意识的输入问题.当我尝试$watched$watch方法本身中修改属性时,请注意问题:

$scope.$watch("property", function (newValue, oldValue) {
    $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue;
    $scope.property = Globalize.parseFloat(newValue);
});
Run Code Online (Sandbox Code Playgroud)

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

当用户开始输入时,输入元素变得非常混乱.我通过将属性拆分为两个属性来改进它,一个用于未解析的值,另一个用于解析的值:

$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);
});
Run Code Online (Sandbox Code Playgroud)

(http://jsfiddle.net/XkPNv/1/)

这是对第一个版本的改进,但是有点冗长,并注意到parsedValue范围更改的属性仍然存在问题(在第二个输入中键入内容,parsedValue直接更改.注意顶部输入不更新).这可能发生在控制器操作或从数据服务加载数据. …

javascript data-binding angularjs angularjs-scope

122
推荐指数
1
解决办法
4万
查看次数