AngularJS - ng-model undefined in the controller

Question

I am trying to read ng-model from the controller, however I could not get it work. It says the ng-model is undefined. I tried to apply the solution provided by others to solve this similar problem but I still could not get it work. Maybe because I am doing it wrongly.

I have the following code snippet:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.apply = function() {
    $scope.name = {}
    var firstName = $scope.name.FirstName;
    alert(firstName);
  }
});

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

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="apply()" type="button">Apply</button>
  Name:
  <input ng-model="name.FirstName">
</div>

However, the alert says the variable "firstName" is undefined after clicking the "apply" button. So I tried to use the following code instead.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.apply = function() {

    var theFirstname = "";
    $scope.name = {
      theFirstname: $scope.name.FirstName
    }

    alert(theFirstname);
  }
});

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

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="apply()" type="button">Apply</button>
  Name:
  <input ng-model="name.FirstName">
</div>

However, it seems like I am unable to assign $scope.name.FirstName to the variable "theFirstname".

Tushar · Accepted Answer · 2017-01-05 04:08:03Z

Move the initialization of name above apply().

By doing this, name.FirstName can be initialized from the Template as name is already defined on scope.

In your case, $scope.name={} is defined in the handler, thus name is undefined by the time when ng-model is attached to the textbox.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  // Define the `name` object
  $scope.name = {};

  $scope.apply = function() {
    var firstName = $scope.name.FirstName;
    console.log(firstName);
  };
});

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

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="apply()" type="button">Apply</button>
  Name:
  <input ng-model="name.FirstName">
</div>

Collectives™ on Stack Overflow

AngularJS - ng-model undefined in the controller

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related