ng-model for input type 'number' not working angularjs

Question

I have integrated requirejs with angular app.. before intregrating requirejs,

<input type="number" value="{{cart.quantity}}" ng-model="cart.quantity" /> 

was showing the value in input box.
But after integrating with requirejs, input box with type="number" not showing me the value.. input box with type="text" is working.

How can I show value with type="number" ?

Thanks

Answer 1

I just ran into this same issue and managed to solve it. In my case, the model is being obtained via a RESTful $resource and the value for the amount is being provided as a string to the field, which in turn wipes out the value. In order to address this, I ended up doing the following in my controller:

$scope.cart = Cart.get(id: $routeParams.id, function(cart){     cart.quantity = parseFloat(cart.quantity, 10); }); 

which turns the value into a float, prior to updating the view. One gotcha I ran into is that my first attempt was setting $scope.cart.quantity = parseFloat($scope.cart.quantity, 10) immediately after the get. This was not working since the value was overwritten when the async call to get completed.

$scope.cart = Cart.get(id: $routeParams.id); $scope.cart.quantity = parseFloat($scope.cart.quantity, 10); // This won't work 

Hope this helps.

Answer 2

Your binded value is a string not a number.

First of all, check that your server is sending a number. If you are using PHP, you might want to use:

json_encode($array, JSON_NUMERIC_CHECK); 

You might also turn your string into int or float with Javascript on the client side:

var data = ['1.9', '3']; //these won't be binded to the numbers-only input data[0] = parseFloat(data[0]); //this will data[1] = parseInt(data[1]); 

It's not a bug as that the numbers input only accepts valid numbers (hopefully).

---

Note:

I also tried to bind an ng-value with an integer filter but it wont't work. Maybe because the ng-model is the one that's binded when both are found (yup, they have the same priority level).