input tag inside ng-repeat angularjs

Question

Why I am using inside ng-repeat tag it is not working. When I push the button to send the data to the server, it is not going push data but it sends null as I check my mongodb.

This is not happening if I move the input area out of ng-repeat

<h3 ng-repeat="review in reviews" class="icon"> 
       <span class="glyphicon glyphicon-user " aria-hidden="true"></span>
        <small >{{review.username}} </small>
        <small  style="float: right;">{{review.mydate}} </small>
        <hr class="hr">
            <div class="content">
                {{review.text}}
            </div>
        <hr class="hr">

        <div > 
        <a href ng-click="addLike(review)"><span  class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a>
        <span  class="glyphicon glyphicon-comment" aria-hidden="true"></span>
        <span  class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
        <a href ng-click="removeReview(review)"> <span  class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
        <hr>

        **<div class="newComment" ng-show='currentUser'   > 
            <input type="text"  placeholder="Pleae post your comment here..."
                   ng-model="newComment"
            >
            <button ng-value="string" type="button" class="btn btn-default"
                    ng-click="submitNewComment(newComment)">Comment</button>
        </div>** 

        <ul>
            <li>
                {{review.comments}}
            </li>
        </ul>

New AngularJS developers often do not realize that `ng-repeat`, `ng-switch`, `ng-view`, `ng-include` and `ng-if` all create new child scopes, so the [data hiding] problem often shows up when these directives are involved. This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models. — georgeawg, Jan 17 '20 at 14:30

score 0 · Accepted Answer · edited Jan 17 '20 at 14:36

0

You are likely falling into scoping issues, each ng-repeat creates it's own scope but you are assigning ng-model to a single scoped item so you are getting null from another item.

Try writing your new comment section like:

<div class="newComment" ng-show='currentUser'   > 
    <input type="text"  placeholder="Please post your comment here..."
           ng-model="review.newComment">
    <button ng-value="string" type="button" class="btn btn-default"
            ng-click="submitNewComment(review.newComment)">Comment</button>
</div>

edited Jan 17 '20 at 14:36

georgeawg

48,608
13
72
95

answered Jan 17 '20 at 13:51

Varedis

738
5
14

thanks for your comment in advance. the comment should be inside the ng-repeat because each post needs to have its own section. when i take out the input section outside of the ng-repeat it is working fine. please advise ... – hardi fatih Jan 17 '20 at 13:59
It is fine to keep it in the repeat, but you weren't assigning `newComment` in the scope of the repeat. Note how I changed the `ngModel` and `submit` function to reference a property on the review so that the scope is correct. Otherwise you have a bunch of fields but only ever assign one value from all of them. – Varedis Jan 17 '20 at 14:08
it is still not working. I was trying to post nodejs few lines of the code and the $scope as well but it did not allow me. do you mind if i connect to you through another channel? I am sorry if is sounds weird but i am really in need to sort it out – hardi fatih Jan 17 '20 at 14:28

input tag inside ng-repeat angularjs

1 Answers1