Software Costa Rica Software Costa Rica - 3 months ago 15
AngularJS Question

Unbind ng-models inside ng-repeats

I have the following issue, I generate several forms using ng-repeat,
I use ng-model to capture the textarea values and it works perfectly but when I try to write something on the textarea elements inside the forms generated by the ng-repeat the text is being duplicated inside all the textarea elements at the same time.

enter image description here

is there some way to Unbind those ng-models?

<div ng-repeat="PostList in PostList">
<form id="PostFormComments" role="form">
<div class="row input-field">
<textarea data-ng-model="data.newComment" placeholder="write something?...." type=text></textarea>
</div>
<a name="action" ng-disabled="!data.newComment" data-ng-click="addCommentPost();" ng-class="clear" class="secondary-content btn-floating waves-effect waves-light light-blue darken-2"></a>
</form>
</div>

Answer

What you could do is use $index which gives you the index of the current ng-repeat and create an object and access it via that.

So you would do something like: $scope.data = {}

and then you'd have the form like:

<div ng-repeat="PostList in PostList">
  <form id="PostFormComments" role="form">
      <div class="row input-field">
        <textarea data-ng-model="data[$index].newComment" placeholder="write  something?...." type=text></textarea>
       </div>
       <a name="action" ng-disabled="!data[$index].newComment" data-ng-click="addCommentPost();" ng-class="clear" class="secondary-content btn-floating waves-effect waves-light  light-blue darken-2"></a>
  </form>
  </div>

and you would see different textarea ng-models as governed by its $index.