为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

宝慕林4294392 2019-10-23 14:40:01

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


在KnockoutJS中,我可以创建一个读/写计算属性,该属性允许我指定一对函数,一个被调用以获取该属性的值,而一个被设置为属性时被调用。例如,这使我可以实现文化意识的输入-允许用户键入“ $ 1.24”,然后将其解析为ViewModel的float,并在输入中反映出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);

});

(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来实现此方案?我在文档中缺少某些功能吗?


查看完整描述

3 回答

?
慕田峪9158850

事实证明,有一个非常优雅的解决方案,但是没有充分记录。


格式化显示模型值可以由|操作员和角度操作员处理formatter。事实证明,ngModel不仅具有格式器列表,而且具有解析器列表。


1. ng-model用于创建双向数据绑定

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

2.在角度模块中创建一个指令,该指令将应用于同一元素,并取决于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文档还提供了简要说明和其他可用方法的概述。


查看完整回答
反对 回复 2019-10-23
?
慕容708150

由于“ require:'ngModel'”,链接函数的第四个参数将是ngModel指令的控制器-即foo.bar的控制器,它是ngModelController的实例。您可以根据需要命名第四个参数。(我将其命名ngModelCtrl。)

查看完整回答
反对 回复 2019-10-23
?
慕斯卡3215842

您是否有任何理由在链接函数中使用“ ngModel”作为第四个参数的名称?难道这不只是该指令的通用控制器,而该指令基本上与ngModel属性无关?(在这里仍然学习角度,所以我可能完全错了。)

查看完整回答
反对 回复 2019-10-23

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信