AngularJS ng-repeat input

Question

I am trying to make comments functionality using Angular js. The problem is that when i want to write a comment for a post, the text is also writing inside other input elements (comments). I write a text inside one input, but it writes it in all inputs

So for example same is happening with this code

<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
    <div>
        <input type="text" ng-model="$parent.new">
    </div>
</div>

if i use new instead of $parent.new i get undefined, but when i use $parent.new and i write in one input, it also writes in other inputs.

This is because you're binding every input to the same model with ngModel. — Drew
– Drew, Commented Nov 19, 2017 at 17:49
and how to make correct ? i have divs generated by ng-repeat according how many news i have in array. and one input inside each div. — jack_snipe
– jack_snipe, Commented Nov 19, 2017 at 17:52

Christian Santos · Accepted Answer · 2017-11-19 17:59:59Z

3

The issue is that you are assigning all of the inputs to the same model, so your inputs are all in sync with the same object.

What you need is to assign each input to a different model. I'm guessing you need these models to be dynamic, so you should use an array as your model and track your ng-repeat by $index like so:

<div ng-repeat="comments in articles track by $index">
    <div>
        <input type="text" ng-model="arr[$index]">
        <span ng-if="arr[$index]">
            {{arr[$index]}}
        </span>
    </div>
</div>

Now, in your controller, you can initialize the empty arr like so:

$scope.arr = [];

Now, your inputs will be in sync with $scope.arr depending on the index they were in.

Try out this jsfiddle for an example.

answered Nov 19, 2017 at 17:59

Christian Santos

5,4551 gold badge20 silver badges24 bronze badges

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

2 Comments

Christian Santos Over a year ago

Glad I could help! If you are happy with the answer, close the question by selecting this as the answer.

Sachin HR Over a year ago

I want to apply same thing for edit.I have three text boxes.After clicking edit for second textbox i want to display value related to second text box.But now it is displaying in all text boxes.

Muhammad Usman · Accepted Answer · 2017-11-19 17:53:41Z

0

This is because you've giving same model (ng-model="$parent.new") for all of the inputs What you should do to avoid this problem is assign different model to each input element. Something like

<div class="comments" ng-repeat="articles in [1,2,[4,5,6]]">
<div ng-repeat="comments in articles">
<div>
    <input type="text" ng-model="comments">
</div>
</div>

edited Nov 19, 2017 at 17:53

answered Nov 19, 2017 at 17:48

Muhammad Usman

10.1k26 silver badges41 bronze badges

4 Comments

jack_snipe Over a year ago

Changed the code a little. Yes, and what should i do ? let say i have 3 divs with some information and input for inside each of them. i want to write comment on first div. how to make this ?

Muhammad Usman Over a year ago

now you comments in your article array will be modeled to this value.

jack_snipe Over a year ago

and how to access via scope ? because in this case $scope.comments is undefined

Muhammad Usman Over a year ago

$scope.articles.comments

NTP · Accepted Answer · 2017-11-19 18:00:04Z

0

Change ng-model of input to

<input type="text" ng-model="comments.comment">

answered Nov 19, 2017 at 18:00

NTP

4,4483 gold badges18 silver badges25 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-repeat input

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related