Binding with input type=number

[st...@fullvolume.co.uk]

With multiple inputs to the same model is it possible to get <input type="number" /> to play nice? It works as an input but updating it to a value set from another input always fails. Even if the source is also constrained as numeric (type="range" in chrome).

Hopefully this demonstrates my problem coherently:

http://jsfiddle.net/TXazw/1/ Edit and input except the number and everything updates except the number input. Edit the number input and everything works fine.

I can't see anything in the API reference, am I missing something?

Thanks

[Peter Bacon Darwin]

The other inputs are converting the model to a string, which is probably bombing out the validation on ngModel for the <input type="number"> element:  http://jsfiddle.net/TXazw/2/ 

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/JNgGxa9KzUUJ.
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.

[Peter Bacon Darwin]

Certainly works and seems like a good work around.

You could probably consider raising an issue on github for it, since a string that can be parsed to a float should probably be considered a number.

On 20 July 2012 11:08, Stephen Hawkes <st...@fullvolume.co.uk> wrote:

Thanks Peter! So is this a fair workaround (I've not used $watch before)?

    $scope.$watch('i', function() {
        $scope.i = parseInt($scope.i);
    }); 

http://jsfiddle.net/TXazw/3/ 

To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/diENBZZwz5UJ.

[sch...@gmail.com]

I had the exact same issue, where my numeric model was bound to both a type=number and a type=range.

IMHO, I don't think anything that looks like a number should be parsed as a number.

I do think that AngularJS should support a type=range as a numerical value, since that is what most users will use it for.

My workaround was to simply create a new directive, which requires the 'ng-model' directive, and adds a 'parser' to the NgModelController. This way there is no watching, and the model value never has an invalid value (i.e. a string instead of a number).

See http://jsfiddle.net/ABE8U/ for the code.

On Friday, July 20, 2012 1:17:47 PM UTC+3, Peter Bacon Darwin wrote:

Certainly works and seems like a good work around.

You could probably consider raising an issue on github for it, since a string that can be parsed to a float should probably be considered a number.

On 20 July 2012 11:08, Stephen Hawkes <st...@fullvolume.co.uk> wrote:

Thanks Peter! So is this a fair workaround (I've not used $watch before)?

    $scope.$watch('i', function() {
        $scope.i = parseInt($scope.i);
    }); 

http://jsfiddle.net/TXazw/3/ 

On Friday, 20 July 2012 11:01:10 UTC+1, Peter Bacon Darwin wrote:

The other inputs are converting the model to a string, which is probably bombing out the validation on ngModel for the <input type="number"> element:  http://jsfiddle.net/TXazw/2/ 

On 20 July 2012 10:44, <st...@fullvolume.co.uk> wrote:

With multiple inputs to the same model is it possible to get <input type="number" /> to play nice? It works as an input but updating it to a value set from another input always fails. Even if the source is also constrained as numeric (type="range" in chrome).

Hopefully this demonstrates my problem coherently:

http://jsfiddle.net/TXazw/1/ Edit and input except the number and everything updates except the number input. Edit the number input and everything works fine.

I can't see anything in the API reference, am I missing something?

Thanks

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/JNgGxa9KzUUJ.
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.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

[Andy Baker]

Just another anecdote to add to this.

Django Rest Framework serializes fixed-point decimal values as strings in JSON as the only other option - float - would result in loss of precision.

The problem is that this means Angular doesn't set bound fields where the input is type=number.

What's the correct thing to do? Well - add a fixed-point decimal type to javascript, obviously but that ain't gonna happen any time soon.

The least worst option I suspect might be to allow JSON strings to be bound to input type=number or at least give the option to allow this.

[Sander Elias]

Hi Andy,

If you need this, it is not that hard to make angular do what you need.

in this fiddle I created an small directive to handle what you need, and you don't even have to change anything in your template/HTML

Regards

Sander