CODEWITHSUNDEEP
angularjs
ThePianist
ThePianist

Reputation: 719

How to get a list of textarea's value inside the controller?

I know in AngularJS you can't manipulate the DOM from the controller, the bridge between the controller and the view is the $scope. I'm creating a few textareas based on an ajax call's result.

<div ng-repeat="field in fieldNames">
   <label for="{{ field }}">Description of {{ field }} field</label>
       <textarea class="form-control" id="{{ field }}" rows="4"></textarea>
</div>

I want to have a plus textarea below these where after clicking on a button, I would parse every textareas' text to Wiki format right into this textarea.

I'm reading the AngularJS documentation, but didn't find a solution yet. If I would give an ng-model={{ field }} to the textareas, how can I get all of them's value?

If I could give a variable after $scope. then there wouldn't be any problem, but I assume it's not possible this way.

In jQuery I got all the textareas except the last one $.each($('textarea'),function(key,val){ result += val.value; ... } and added their values to the string I write out to the Wiki textarea.

Is there a similar way in AngularJS?

Upvotes: 1

Views: 591

Answers (1)

Ilan Frumer
Ilan Frumer

Reputation: 32367

ngModel doesn't support interpolation syntax {{ expression }}.

Your data should be formed as array of objects:

$scope.fieldNames = [
 { id:1, name:"textarea1" , text:"" },
 { id:2, name:"textarea2" , text:"" },
 { id:3, name:"textarea3" , text:"" }
]

Then you can do this:

<div ng-repeat="field in fieldNames">
   <label for="{{ field.id }}">Description of {{ field.name }} field</label>
       <textarea ng-model="field.text" class="form-control" id="{{ field.id }}" rows="4"></textarea>
</div>

Upvotes: 2

Related Questions