CODEWITHSUNDEEP
javascriptangularjs
hyperN
hyperN

Reputation: 2754

Angularjs ng-model is undefined

In HTML I have this line of code:

 <input type="text" class="training-comment" placeholder="Enter comment" ng-model="content" data-ui-keypress="{13:'keypressCallback($event)'}">

And in controller this:

$scope.keypressCallback = function ($event) {
    console.log("comment is", $scope.content);
    $event.preventDefault();
};

And when I enter some text in input and press enter in console I see that $scope.content is undefined.

Why is this ?

Upvotes: 2

Views: 6983

Answers (1)

drew_w
drew_w

Reputation: 10430

I put together a Plunker example here using the Angular UI and basically copying the code from the question. I then took this example and added an ng-repeat to demonstrate one of the most common issues I have seen: scope issues:

<div ng-repeat="x in collections">
  <input type="text" class="training-comment" placeholder="Enter comment"
ng-model="content" data-ui-keypress="{13:'keypressCallback($event)'}" />
  <br /><br />
</div>

You can find this updated plunker example here. Basically whenever you use an ng-repeat or any other directive that creates a new scope your model exists in that scope - not the parent or root scope. This means that your code might be working, but it is printing out the value from the wrong scope! For more information on scopes see the angular documentation here.

To use the plunker demo, type into the first input and press the enter key, the model will be updated. But, if you type into either of the other two boxes, though, the model will either not be updated or it will be undefined (if you have never typed into the first box).

Even if this isn't the exact issue, hopefully it will still help. Best of luck!

Upvotes: 3

Related Questions