How to do two-way filtering in AngularJS?

Question

One of the interesting things AngularJS 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?

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.

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

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

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.

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

Solution

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.

1. Use ng-model to create the two-way data binding

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

2. Create a directive in your angular module that will be applied to the same element and that depends on the ngModel controller

module.directive('lowercase', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, 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. 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

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

Comments

[Drew Miller]

IS there any reason you used "ngModel" as the name for the fourth parametet in your linking function? Isn't that just a generic controller for the directive that has basically nothing to do with the ngModel attribute? (Still learning angular here so I could be totally wrong.)

[Mark Rajcok]

Because of "require: 'ngModel'", the linking function's 4th parameter will be the ngModel directive's controller -- i.e., foo.bar's controller, which is an instance of ngModelController. You can name the 4th parameter whatever you want. (I would name it ngModelCtrl.)

[Nikhil Dabas]

This technique is documented at docs.angularjs.org/guide/forms, in the Custom Validation section.

[Rajkamal Subramanian]

@Mark Rajcok in the fiddle provided, while clicking Load Data -- all lowercase, i expected the model value would be in ALL CAPS, but the model value was in small. Could you pls. explain why, and how to make the model always IN CAPS

[Mark Rajcok]

@rajkamal, since loadData2() modifies $scope directly, that's what the model will be set to... until the user interacts with the textbox. At that point, any parsers can then affect the model value. In addition to a parser, you could add a $watch to your controller to transform the model value.

[RONE]

Hi Guys, i am new to angular and struck in ngModel, This explanation is Ok, but what i again feel, is that we can use $filters in directive like $filter('uppercase')(value) or $filter('lowercase')(value);and can do the operation that is performed using ngModel.$parsers.push(fromUser); ngModel.$formatters.push(toUser);, So when/why exactly we need ngModel. Note: This may be a silly question or not valid, But please correct me.

[Kishore Relangi]

What is If I want to show the lowercase letters while typing (i.e., on-change) itself.

[davidluckystar]

thank you so much! i was searching for this neat and conciese example for 8 hours or so! the formatters and parsers seem to be a powerfull feature like JSF converters in java