Dynamic addition of div using ng-repeat in angularjs

Question

I am a beginner in angularjs. I want to dynamically add a div while clicking on add icon.I have done some script on this .

HTML part:

<div ng-show="child" class="childDiv" data-ng-repeat="choice in choices track by $index">
    <label for="childname" class="childname"  >ServerName </label>
    <input  ng-model="serverinfo.childname" type="text" required="required"  placeholder="name"/>
    <label for="childname" class="childname"  >Fullname</label>
    <input  ng-model="serverinfo.childfullname" type="text" required="required"  placeholder="fullname"/>
    <label for="childname" class="childname"  >Mandatory Field</label>
    <input  ng-model="serverinfo.field" type="text" required="required"  placeholder="city/county.."/>
    <label for="childname" class="childname"  >Field values</label>
    <input  ng-model="serverinfo.value" type="text" required="required"  placeholder=""/>
    <i ng-click="removechild()" ng-show="$last" style="padding-left:16em;" class="material-icons">remove</i>                                    
</div>
<i ng-click="addchild()" style="padding-left:16em;" class="material-icons">add</i>

JS part:

$scope.addchild  = function() {
    //  $scope.child = true;
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});
};

$scope.removechild  = function() {
    var lastItem = $scope.choices.length-1;
    $scope.choices.splice(lastItem);
};

My output is like this,

My issue is like whatever I input in the textbox, it will automatically copy to the next set. Can anyone figure out the issue.

Why do you always bind the values to serverinfo? Shouldn't you bind it to choice in? — Alon Eitan
– Alon Eitan, Commented Apr 25, 2017 at 11:49
You should know that after this change you won't have anything inside $scope.serverinfo. If you want to use serverinfo in the controller then you should use serverinfo[ $index ].yourPropertyName instead - This will give you an array where the properties of the elements in the $scope.serverinfo array match the choices in $scope.choices respectively — Alon Eitan
– Alon Eitan, Commented Apr 25, 2017 at 11:53

Alon Eitan · Accepted Answer · 2017-04-25 12:40:56Z

4

You're currently binding all the values to the same object serverinfo, and because you're inside a loop (ng-repeat) then each field in the loop is bound to the same object in the controller.

You have two options:

Bind the fields to the choice element:

<div ng-show="child" class="childDiv" data-ng-repeat="choice in choices track by $index">
    <input  ng-model="choice.childname" type="text" required="required"  placeholder="name"/>
</div>

The above will bind the properties to each choice directly, and will be available in the controller via console.log( $scope.choices[0].childname );

Use the $index indicator to create an array of matched choices:

This is a good solution for cases when you don't want to overwrite/change the values of the original array.

<div ng-show="child" class="childDiv" data-ng-repeat="choice in choices track by $index" ng-init="serverinfo[ $index ].id = choice.id">
    <input  ng-model="serverinfo[ $index ].childname" type="text" required="required"  placeholder="name"/>
</div>

The above will bind the properties to a new array object name serverinfo, where each element is relative to a choice in $scope.choices, it will be available in the controller via console.log( $scope.serverinfo[0].childname );

Note that I also added ng-init="serverinfo[ $index ].id = choice.id" to copy the id property of each choice to the new array elements that are dynamically created by the ngRepeat directive loop.

edited Apr 25, 2017 at 12:40

answered Apr 25, 2017 at 12:04

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

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

6 Comments

Praveen Kumar Purushothaman Over a year ago

Hey, in your previous comment of that "edit saved" thing, I didn't understand what you meant?

Alon Eitan Over a year ago

@PraveenKumar On that post that was just deleted?

Praveen Kumar Purushothaman Over a year ago

Yup, that same one.

Alon Eitan Over a year ago

@PraveenKumar Just a sarcastic comment to the editor that changed i'm to I'm and same capitalization to the comment :)

Alon Eitan Over a year ago

@PraveenKumar I just remembered this comment so I wanted to let them understand that they should not do unneccacery edits (Eddited the link)

|

Jins Peter · Accepted Answer · 2017-04-25 11:56:34Z

using your repeated item name "choice" instead of serverInfo should solve the issue

                       <div ng-show="child" class="childDiv" data-ng-repeat="choice in choices track by $index">
                                        <label for="childname" class="childname"  >ServerName </label>
                                        <input  ng-model="choice.childname" type="text" required="required"  placeholder="name"/>
                                        <label for="childname" class="childname"  >Fullname</label>
                                        <input  ng-model="choice.childfullname" type="text" required="required"  placeholder="fullname"/>
                                        <label for="childname" class="childname"  >Mandatory Field</label>
                                        <input  ng-model="choice.field" type="text" required="required"  placeholder="city/county.."/>
                                        <label for="childname" class="childname"  >Field values</label>
                                        <input  ng-model="choice.value" type="text" required="required"  placeholder=""/>
                                        <i ng-click="removechild()" ng-show="$last" style="padding-left:16em;" class="material-icons">remove</i>

                                </div>
                                <i ng-click="addchild()" style="padding-left:16em;" class="material-icons">add</i>

And where do you have this serverInfo, What is serverInfo, its only seen in the HTML

Jenny · Accepted Answer · 2017-04-25 11:52:57Z

0

That is because you are binding same ng model to each repeating object. put

 ng-model="choice.childname"

Do same for other inputs. And if you want serverinfo to contain all this values than copy it.

answered Apr 25, 2017 at 11:52

Jenny

6634 silver badges8 bronze badges

Collectives™ on Stack Overflow

Dynamic addition of div using ng-repeat in angularjs

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related