如何做双向的过滤angular.js？ [英] How to do two-way filtering in angular.js?

问题描述

一个有趣的事情Angular.js可以做的是应用过滤器到一个特定的数据绑定前pression，这是应用一种方便的方式，例如，一个模型属性的特定文化的货币或日期格式。这也是不错的计算上的作用域属性。问题是，没有这些功能具有双向数据绑定方案的工作 - 从范围到视图只是单向数据绑定。这似乎是一个明显的遗漏在一个原本优秀的图书馆 - ？还是我失去了一些东西。

One of the interesting things Angular.js can do is apply a filter to a particular databinding expression, which is a convenient way to apply, for example, culture-specific currency or date formatting of a model's properties. It is also nice to have computed properties on the scope. The problem is that neither of these features work with two-way databinding scenarios - only one-way databinding from the scope to the view. This seems to be a glaring omission in an otherwise excellent library - or am I missing something?

在 KnockoutJS ，我可以创建一个读/写性能计算，这让我指定一​​对函数，其中一个被称为获取属性的值，并且当属性设置其中一个被调用。这让我来实现，例如，文化意识的输入 - 让用户输入$ 1.24，并对其进行解析时到视图模型一个浮动，并在视图模型变化体现在投入。

In KnockoutJS, I could create a read/write computed property, which allowed me to specify a pair of functions, one which is called to get the value of the property, and one which is called when the property is set. This allowed me to implement, for example, culture-aware input - letting the user type "$1.24" and parsing that into a float in the ViewModel, and have changes in the ViewModel reflected in the input.

我能找到类似这样的最接近的是使用$范围$腕表（propertyName的，functionOrNGEx pression）。这让我有一个函数调用在$范围变化的属性时。但是，这并没有解决，例如，文化意识的输入问题。注意问题，当我试图将$腕表方法本身内修改$看着属性：

The closest thing I could find similar to this is the use of $scope.$watch(propertyName, functionOrNGExpression); This allows me to have a function invoked when a property in the $scope changes. But this doesn't solve, for example, the culture-aware input problem. Notice the problems when I try to modify the $watched property within the $watch method itself:

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

（http://jsfiddle.net/gyZH8/2/）

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

input元素获取当用户开始打字很困惑。我改进它通过把财产分为两个属性，一个用于未解析值，一个用于解析值：

The input element gets very confused when the user starts typing. I improved it by splitting the property into two properties, one for the unparsed value and one for the parsed value:

$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/）

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

这是在第一个版本有所改进，但更详细一点，并注意仍然存在的范围变化parsedValue财产（类​​型的东西在第二个输入，直接改变parsedValue的问题。通知顶部的输入不更新）。可能发生这种情况从一个控制器动作或加载数据从数据服务。

This was an improvement over the first version, but is a bit more verbose, and notice that there is still an issue of the parsedValue property of the scope changes (type something in the second input, which changes the parsedValue directly. notice the top input does not update). This might happen from a controller action or from loading data from a data service.

有没有实现使用Angular.js这种情况下一些更简单的方法？我缺少一些功能，在文件中？

Is there some easier way to implement this scenario using Angular.js? Am I missing some functionality in the documentation?

推荐答案

原来，有一个很优雅的解决方案，但它不是有据可查的。

It turns out that there's a very elegant solution to this, but it's not well documented.

显示格式化模型值可以通过处理。事实证明，这已不仅是一个格式化的名单也解析器的列表。

Formatting model values for display can be handled by the | operator and an angular formatter. It turns out that the ngModel that has not only a list of formatters but also a list of parsers.

<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。在链接方法，添加自定义的转换器到 ngModel 控制器

3. Within the link method, add your custom converters to the ngModel controller

function fromUser(text) {
    return (text || '').toUpperCase();
}

function toUser(text) {
    return (text || '').toLowerCase();
}
ngModel.$parsers.push(fromUser);
ngModel.$formatters.push(toUser);

4。新指令添加到已有的 ngModel

相同的元素

4. Add your new directive to the same element that already has the ngModel

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

下面是一个工作示例的转换文本中的输入和背部为大写模型

Here's a working example that transforms text to lowercase in the input and back to uppercase in the model

有关模型控制器 API文档也有一个简要的解释和的概述其他可用的方法。

The API Documentation for the Model Controller also has a brief explanation and an overview of the other available methods.

这篇关于如何做双向的过滤angular.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！