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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (10)

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

我能找到的最相似的东西是使用$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/gyZH 8/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);
});

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

提问于
用户回答回答于

1.。使用ng-model to create the two-way data binding

<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>

扫码关注云+社区