Using custom filter in ng-model

[levyuk]

Hi

How can I use a custom date filter on a model to show formatted date?

In fact, how do I even get the normal date filter to work in the model because this doesn't work

ng-model="aDate | date:'medium'"

Thanks

Jon

[levyuk]

I get this message in the console 

Non-assignable model expression:

[Peter Bacon Darwin]

You can't use a filter in ng-model as it needs the expression to be assignable (i.e. it must be able to appear on the left hand side of an assignment).

This would not be possible:

(aDate | date:'medium') = someValue;

On 10 January 2013 18:41, levyuk <levy...@gmail.com> wrote:

I get this message in the console 

Non-assignable model expression:

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[levyuk]

So I guess the only way to show formatted dates would be to use a function and return the formatted date?

[Peter Bacon Darwin]

This is what $formatters are for in the ngModelController.  Have a read of this: http://docs.angularjs.org/guide/forms

[Pawel Kozlowski]

Hi!

On Thu, Jan 10, 2013 at 7:49 PM, levyuk <levy...@gmail.com> wrote:
> So I guess the only way to show formatted dates would be to use a function
> and return the formatted date?

Actually a proper soultion here is a custom directive that would plug
into $formatters and $parsers pipeline. Basically then you can
register a function that can convert objects to their string
representation (and do inverse conversion as well).

Cheers,
Pawel


--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/

[levyuk]

Thanks both. I see where you're going with that and it appears to work for the moment. So for anyone else who comes across this. Here's the example code:

.directive('formatteddate', function ($filter) {

    return {

        link: function (scope, element, attrs, ctrl) {

            ctrl.$formatters.unshift(function (modelValue) {

                return $filter('date')(modelValue);

            });

            ctrl.$parsers.unshift(function (viewValue) {

                return $filter('date')(modelValue);

            });            

        },

        restrict: 'A',

        require: 'ngModel'

    }

});