Getting value of TextArea angularjs

Question

I have a textarea:

<textarea class="notes" ng-model="notes" placeholder="Some text" style="height: 630px;"></textarea>

I then have a button:

<button ng-click="saveNotes(notes)"></button>

I then have this method in my controller:

$scope.saveNotes = function(notes) {
    console.log(notes);
    student.saveNotes(notes, function() {
        console.log("Successfully saved notes.")
    }
)};

From what I can tell, notes should return the value of the textarea yet it is consistently returning "undefined". Can anyone spot the problem?

Thanks

Have you checked to make sure they are under the same controller (and therefore the same scope) — Binvention
– Binvention, Commented Dec 27, 2015 at 23:11
@Binvention They are under the same controller. Is there anything else that might be the reason? — tryingtolearn
– tryingtolearn, Commented Dec 27, 2015 at 23:24
I would think it's either a problem with notes not being defined before its used in ng model or there is an odd problem with the scopes. I've found the easiest way to manage scopes is to keep the variables assigned to the controller rather then to $scope. It maybe a bit longer but it's easier to tell when you have a scope problem — Binvention
– Binvention, Commented Dec 27, 2015 at 23:27
For the first explanation you could use ng-init('notes') for assigning variables to the controller I put an example as an answer — Binvention
– Binvention, Commented Dec 27, 2015 at 23:29

Binvention · Accepted Answer · 2015-12-27 23:35:00Z

1

Perhaps try assigning your variables to the controller rather then the scope like this

<div ng-controller='myController as app'>
<textarea class="notes" ng-model="app.notes" placeholder="Some text" style="height: 630px;"></textarea>
<button ng-click="app.saveNotes(app.notes)"></button>
</div>

Then in your code under your controller

this.saveNotes = function(notes) {
console.log(notes);
student.saveNotes(notes, function() {
    console.log("Successfully saved notes.")
}
)};

In my opinion it just helps prevent conflicting scopes

answered Dec 27, 2015 at 23:35

Binvention

1,0771 gold badge9 silver badges24 bronze badges

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

Comments

Didier68 · Accepted Answer · 2015-12-27 23:02:04Z

1

You retrieve notes' values in "$scope.notes". Solution:

<button ng-click="saveNotes()"></button>

and:

$scope.saveNotes = function() {
    console.log($scope.notes);
    student.saveNotes($scope.notes, function() {
        console.log("Successfully saved notes.")
    }
)};

answered Dec 27, 2015 at 23:02

Didier68

1,40317 silver badges30 bronze badges

1 Comment

tryingtolearn Over a year ago

I used your solution but I'm still getting the same error.

Collectives™ on Stack Overflow

Getting value of TextArea angularjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related