Angular model not binding data

Question

I cannot explain (probably I'm blind!!) why I can't get value from $scope using ng-model in the following code:

var appModule = angular.module('publicApp',[]);


appModule.controller("changePasswordController",
	function($scope, $location, mainService) {
		
		$scope.sendChangePassword = function(){

			alert('password: ' + $scope.password + '\n' + 
					'password_rpt: ' + $scope.password_rpt + '\n' + 
					'user: ' + $scope.user + '\n' + 
					'token: ' + $scope.token + '\n' 
					);
		}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>

<body ng-app="publicApp" style="padding: 50px">
    <div class="row-fluid">
        <form name="form" novalidate="novalidate">
            <span ng-controller="changePasswordController">
                <input type="text" name="user" id="user" ng-model="user" value="[email protected]"
                       style="display: none;"/>
                
                <input type="hidden" name="token" id="token" ng-model="token"
                       value="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE0NTU3MTg2NjEsInVzZXJJZCI6ImZyYW5jZXNjby5kaXBhc3F1YW50b25pb0BnbWFpbC5jb20iLCJyb2xlcyI6WyJub25lIl19.Uzw2GuPhxagfeEESL9WF3RAC7upZFudJpag6Jjl2KQk"/>
                
                <div class="input-group input-sm">
                    <input class="form-control" type="password" required id="password" name="password" ng-model="password"
                           placeholder="inserisci password"/>
                </div>
                <div class="input-group input-sm">
                    <input type="password" class="form-control" id="password_rpt" name="password_rpt"
                           ng-model="password_rpt" password-match="password" required placeholder="ripeti password"/>
                </div>
                <div>
                    <input type="button"
                           class="btn btn-primary btn-default" value="Change Password"
                           ng-click="sendChangePassword()"/>
                </div>
            </span>
        </form>
    </div>
</body>

In My running code I can get only $scope.password value, rest of variables are undefined!

This is what the alert print:

Possible duplicate of Angular js init ng-model from default values — Shashank Agrawal
– Shashank Agrawal, Commented Feb 17, 2016 at 13:54

Peter · Accepted Answer · 2016-02-17 12:00:49Z

3

Your module is not created the right way. Try changing this:

var appModule = angular.module('publicApp');

into this:

var appModule = angular.module('publicApp', []);

answered Feb 17, 2016 at 12:00

Peter

1,3002 gold badges13 silver badges23 bronze badges

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

4 Comments

Dark Army Over a year ago

angular.module('app', []) is to create a new module without any module dependency. angular.module('app') is to retrieve an existing module whose name is app.

Peter Over a year ago

Yes that is true, but i can't assume that the OP has allready created the module before.

Francesco Di Pasquantonio Over a year ago

Sorry, it's a copy/paste error, in my running code it's running fine and I can see the alert.

Peter Over a year ago

@FrancescoDiPasquantonio look at this plunker: link i had to remove the service mainService to try your code and i have password & password_rpt are nicely filled in. The other values like user and token have to be defined inside of your controller.

Shashank Agrawal · Accepted Answer · 2016-02-17 13:12:30Z

You need to initialize the default values like below in your controller:

var appModule = angular.module('publicApp', []);


appModule.controller("changePasswordController",
  function($scope, $location) {

    $scope.user = "[email protected]";
    $scope.token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE0NTU3MTg2NjEsInVzZXJJZCI6ImZyYW5jZXNjby5kaXBhc3F1YW50b25pb0BnbWFpbC5jb20iLCJyb2xlcyI6WyJub25lIl19.Uzw2GuPhxagfeEESL9WF3RAC7upZFudJpag6Jjl2KQk";

    $scope.sendChangePassword = function() {

      alert('password: ' + $scope.password + '\n' +
        'password_rpt: ' + $scope.password_rpt + '\n' +
        'user: ' + $scope.user + '\n' +
        'token: ' + $scope.token + '\n'
      );
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>

<body ng-app="publicApp" style="padding: 50px">
    <div class="row-fluid">
        <form name="form" novalidate="novalidate">
            <span ng-controller="changePasswordController">
                <div class="input-group input-sm">
                    <input class="form-control" type="password" required id="password" name="password" ng-model="password"
                           placeholder="inserisci password"/>
                </div>
                <div class="input-group input-sm">
                    <input type="password" class="form-control" id="password_rpt" name="password_rpt"
                           ng-model="password_rpt" password-match="password" required placeholder="ripeti password"/>
                </div>
                <div>
                    <input type="button" class="btn btn-primary btn-default" value="Change Password"
                           ng-click="sendChangePassword()"/>
                </div>
            </span>
        </form>
    </div>
</body>

If the user and the token is being generated and rendered by the server in HTML form, then you should avoid it. It is common mistake of using ng-model with value attribute in Angular.

In case, you are bound to initialize the values of token & user, then instead of assigning them in the hidden input fields, you should render them as a global variable probably in the head section like this:

<head>
    <script>
         window.globalData = {
               user: "[email protected]",
               token: "your-long-token"
         };
    </script>
</head>

Now, read those variables in the controller using the $window (an Angular wrapper of window object:

$scope.user = $window.globalData.user;
$scope.token = $window.globalData.token;

Collectives™ on Stack Overflow

Angular model not binding data

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related