Formatting inputs on blur

[Kris Willis]

Hi,

I have a number of text fields bound to models in my app that are for inputting cost values; I'm trying to figure out a way of formatting them when focus is lost. For example, if values such as "10", ".2" or "0.126" are entered, it should format to "10.00", "0.20" or "0.13" respectively. I've played with triggering a function with ng-change that does the formatting, but as it is happening as the user types, it's very disruptive and frustrating to use. I'm considering listening for the blur event with jQuery, formatting the value and calling $scope.$apply() to update the model with the formatted value, but this doesn't sound like the Angular way of doing things. Has anyone else done this before, or have any suggestions?

Many thanks

[Peter Bacon Darwin]

How about: Create an attribute directive which requires ngModel.  In the link function for this directive bind to the blur event and when this event occurs you can call the $setViewModel with the newly formatted value?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Kris Willis]

Thanks Peter, this appears to work well! One minor point that I was wondering about, I seem to have to call element.val(value) to update the contents of the input field; shouldn't the data binding update this automatically when the model is updated with model.$setViewValue(value) ?

angular.module('directiveModule', []).directive('decimals', [

    function () {

        return {

            require: 'ngModel',

            link: function($scope, element, attrs, model) {

                element.bind('blur', function () {

                    var decimals = parseInt(attrs.decimals),

                        value    = (!isNaN(element.val()))

                            ? parseFloat(element.val()).toFixed(decimals)

                            : (0).toFixed(decimals);

                    element.val(value);

                    $scope.$apply(function() {

                        model.$setViewValue(value);

                    });

                });

            }

        };

    }

]);

[Peter Bacon Darwin]

No setviewvalue only updates the model and doesn't trigger a digest.

Pete
...from my mobile.

[Kris Willis]

Understood, thanks again!