Angularjs ng-model with number input

Question

I'm trying to retrieve an input[number] in my controller.

I found a solution which said to add a $scope.$watch on the input.

I tried it but now my number is "NaN".

<div class="offerText">
    <label class="form-inline" ng-if="!admin">What will it cost ? <input type="number" class="form-control" ng-model="estimation"/></label>      
    <label class="form-inline">Comments <textarea rows="3" cols="50" class="form-control" ng-model="comments"></textarea></label>
</div>

And In my controller

    $scope.$watch('estimation', function (val, old) {
        $scope.estimation = parseFloat(val);
    });

Thx for your help !

when value is "" or null conversion will obiviously parseFloat would be always NaN — Pankaj Parkar
– Pankaj Parkar, Commented Mar 26, 2015 at 13:52

JB Nizet · Accepted Answer · 2015-03-26 13:57:35Z

4

You don't need a watch. The problem here is that the input is inside an ng-if directive, which defines its own scope. The estimation is stored in the ng-if scope instead of being stored in the controller scope.

Rule or thumb: always have a dot in your ng-model.

In your controller, add

$scope.data = {};

And in the html, use

ng-model="data.estimation"

and

ng-model="data.comments"

answered Mar 26, 2015 at 13:57

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raulucco · Accepted Answer · 2015-03-26 13:53:22Z

0

Test if the new value is not undefined or null or something falsy, this happens because angular loops a few times through the watchs and the models, this process is call dirty checking

$scope.$watch('estimation', function (val, old) {
        if (!val) {
          return;
        }
        $scope.estimation = parseFloat(val);
    });

answered Mar 26, 2015 at 13:53

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

1 Comment

Weedoze Over a year ago

console.log("ESIMATION : " + $scope.estimation); It says "undefined"

Pankaj Parkar · Accepted Answer · 2015-03-26 13:55:39Z

0

When your value is "" or null you will always get parseFloat result as NaN

$scope.$watch('estimation', function (val, old) {
    return !isNaN(val) ? parseFloat(val): 0; //considering default value is 0 
});

Other possible way would get value on change, using ng-change directive.

<div class="offerText">
    <label class="form-inline" ng-if="!admin">What will it cost ? <input type="number" class="form-control" ng-model="estimation" ng-change="changedEstimation(estimation)"/></label>      
    <label class="form-inline">Comments <textarea rows="3" cols="50" class="form-control" ng-model="comments"></textarea></label>
</div>

Controller

$scope.changedEstimation =  function(val){
   return !isNaN(val) ? parseFloat(val): 0;
}

answered Mar 26, 2015 at 13:55

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

Weedoze Over a year ago

console.log("ESIMATION : " + $scope.estimation); It says : "Undefined"

Pankaj Parkar Over a year ago

on initial it will be undefined, after changing value you can get the changed val..

Collectives™ on Stack Overflow

Angularjs ng-model with number input

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related