Formatting display value for input fields

[knrdk]

Knockout has a really easy way to separate the display of a value from
the actual value type (ie. store as float, display as formatted
currency value) for both reading and writing values. Is there
something similar for angular? Initially I thought I could use
ng:format for this, but I wasn't able to parse any subsequent user
input.

This is an example from knockout, maybe this explain better what I'm
hoping to accomplish:

viewModel.formattedPrice = ko.dependentObservable({
read: function() {
return "$" + this.price().toFixed(2);
},
write: function (value) {
// Strip out unwanted characters, parse as float, then write
the raw data back to the underlying "price" observable
value = parseFloat(value.replace(/[^\.\d]/g, ""));
this.price(isNaN(value) ? 0 : value); // Write to underlying
storage
},
owner: viewModel
});

Alternatively, is it possible to use both knockout and angular in the
same app? knockout for the viewmodel, angular for everything else.

Thanks,
Konrad

[Igor Minar]

Hi Konrad,

use filters[1] for formatting one-way data bindings and formatters[2] for two-way data bindings.

I wonder why formatters didn't work for you. Can you create a jsfiddle[3] with a sample of your app?

/i

[1] http://docs.angularjs.org/#!/api/angular.filter

[2] http://docs.angularjs.org/#!/api/angular.formatter
[3] http://jsfiddle.net/vojtajina/CHVbb/

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

[knrdk]

http://jsfiddle.net/CHVbb/133/

The first time the page loads, the value is displayed as intended.
Once I change the value of the input field though, it doesn't update
the display value.

Is that the intended behavior?

Thanks,
Konrad

[Dan Doyon]

Konrad,

How about using currency filter instead for display?

http://docs.angularjs.org/#!/api/angular.filter.currency

--dan

[Suller Andras]

I think this is the intended behavior. The formatter does not reformat
the value in your input field while the user is typing. It would be
too complicated to do that.
However it would be nice if the formatter would re-render the value
when the input field lost focus.

Andras

[Igor Minar]

On Sat, Sep 3, 2011 at 3:50 PM, knrdk <klun...@gmail.com> wrote:

http://jsfiddle.net/CHVbb/133/

The first time the page loads, the value is displayed as intended.
Once I change the value of the input field though, it doesn't update
the display value.

Can you be more specific about the intended behavior? When I change $0.0 to $200, it does the right thing.

/i

 

Is that the intended behavior?

Thanks,
Konrad

[Anthony Bullard]

I think he possibly wants behavior like a cash register, where $0.00 is displayed, when you want to enter say $12.50, it first displays $0.01, then $0.12, $1.25, and finally $12.50. This is as you type each number the decimal is fixed, and the dollar sign is always present.  So if you wanted to enter $5.00, you would have to enter 5, 0, 0. not just 5.  I could be wrong, but that is the only use case I can imagine where the current behavior is not in line with what is expected.