Angularjs ng-model in input does not update value in controller

Question

Can anyone explain to me why when I print console.log($scope.inputvalue) the variable is not updated with the values that I enter in the input?

Maybe I just misunderstood the meaning of ng-model, in this case, how do I pass a value from the view to controller?

(function () {
'use strict';

angular.module('LunchCheck', [])
.controller('checkiftoomuch', ['$scope', checkiftoomuch]);

function checkiftoomuch($scope){
    $scope.inputvalue = "";
    console.log($scope.inputvalue);
}

})();

<!doctype html>
<html lang="en" ng-app="LunchCheck">
  <head>
    <title>Lunch Checker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <style>
      .message { font-size: 1.3em; font-weight: bold; }
    </style>
  </head>
<body>
   <div class="container" ng-controller="checkiftoomuch">
     <h1>Lunch Checker</h1>

         <div class="form-group">
             <input id="lunch-menu"
             type="text"
             placeholder="list comma separated dishes you usually have for lunch"
             class="form-control"
             ng-model="inputvalue">
         </div>
         <div class="form-group">
             <button class="btn btn-default">Check If Too Much</button>
         </div>
         <div class="form-group message">
           Total number of disches: {{ inputvalue }}
         </div>
   </div>

</body>
</html>

“Whenever you have ng-model there’s gotta be a dot in there somewhere. If you don’t have a dot, you’re doing it wrong.” . Your problem is that the inputValue you are editing is inside a subdirective scope, not your controller's. You have to put your input in an object like $scope.state = { inputValue : 0 } and use ng-model="state.inputValue" — anotherdev
– anotherdev, Commented Feb 27, 2019 at 11:46
@PierreEmmanuelLallemant - I would beg to differ here, one can always use a variable directly attached to the scope, without making it an object property. The inputValue is definitely in the controller's scope. — Anurag Srivastava
– Anurag Srivastava, Commented Feb 27, 2019 at 12:20
@AnuragSrivastava no you can't. The best approach is to use the controllerAs: you use 'controllerAs': '$ctrl' in your directive declaration, and use this.inputValue in the controller instead of $scope.inputValue, and in the view use ng-model="$ctrl.inputValue" . It won't be in $scope, just attached to the this of the controller. — anotherdev
– anotherdev, Commented Feb 27, 2019 at 12:58
@PierreEmmanuelLallemant Have you run the code snippet provided above? The view is updated without the use of any object or a controllerAs syntax. — Anurag Srivastava
– Anurag Srivastava, Commented Feb 27, 2019 at 13:02
didn't read your code, seems you had another problem. But anyway, your ngmodel="inputvalue" WILL become a problem if you use directives around the input (ng-if etc...) since there will be a new scope, in that case $scope.inputvalue from your controller will not return the displayed value. — anotherdev
– anotherdev, Commented Feb 27, 2019 at 13:20

Anurag Srivastava · Accepted Answer · 2019-02-27 11:15:48Z

1

You're setting $scope.inputvalue = ""; before the console.log. But after you change the value, you need to console.log it again. Try using:

function checkiftoomuch($scope){
    $scope.inputvalue = "";
    console.log($scope.inputvalue);

    $scope.$watch('inputvalue', function(newValue, oldValue){
        console.log(newValue);
    })
}

Or add a function on your button click like:

<div class="form-group">
    <button class="btn btn-default" ng-click="showValue()>Check If Too Much</button>
</div>

And in JS:

function checkiftoomuch($scope){
    $scope.inputvalue = "";
    console.log($scope.inputvalue);

    $scope.showValue = function(){
        console.log($scope.inputvalue);
    }
}

AngularJS has 2-way data binding which means, the values in the view and controller are in sync always, they do not have to be passed back and forth.

edited Feb 27, 2019 at 11:15

answered Feb 27, 2019 at 10:43

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

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

2 Comments

Furin Over a year ago

Thank you very much. I'm still struggling understanding the sync concept between view and controller. I thought the variable in the controller would be automatically updated after the changes in view. So, I guess I didn't properly understand the function of ng-model.

Anurag Srivastava Over a year ago

The variable is indeed updated in the controller, which you also see in your view with the {{ inputValue }}. It was just a matter of getting the value into the console after the value had changed.

Collectives™ on Stack Overflow

Angularjs ng-model in input does not update value in controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related