Question

32

Angularjs ng-model is undefined

rated 0 times [ 39] [ 7] / answers: 1 / hits: 7019 / 10 Years ago, mon, march 31, 2014, 12:00:00

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 ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

clarkulisesa

Add To Favorites

Follow

Total Points: 422

Total Questions: 93

Total Answers: 112

Location: Austria

Member since Thu, Jan 7, 2021

3 Years ago

clarkulisesa questions

1 Google BigQuery Error: Syntax error: Illegal input character %

Fri, Sep 18, 20, 00:00, 4 Years ago

1 how to change state of a react component from another component

Mon, Jun 22, 20, 00:00, 4 Years ago

1 How to compare objects using lodash regardless on their order

Tue, Jun 16, 20, 00:00, 4 Years ago

1 How to listen sortChange(event) on Angular for ag-Grid?

Mon, Feb 24, 20, 00:00, 4 Years ago

1 Vue JS provide/inject and Props

Mon, Aug 12, 19, 00:00, 5 Years ago

View All

answered 10 Years ago breap · Accepted Answer

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!