在angularjs中使用ng-repeat动态添加div [英] Dynamic addition of div using ng-repeat in angularjs

问题描述

我是angularjs的初学者. 我想在单击添加图标时动态添加div.我已经在此完成了一些脚本.

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部分:

<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部分:

$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 issue is like whatever I input in the textbox, it will automatically copy to the next set. Can anyone figure out the issue.

推荐答案

您当前正在将所有值绑定到同一对象serverinfo，并且因为您位于循环(ng-repeat)之内，所以其中的每个字段循环绑定到控制器中的同一对象.

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.

您有两个选择:

将字段绑定到choice元素:

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>

以上内容将直接将属性绑定到每个选项，并可通过console.log( $scope.choices[0].childname );

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

使用$index指示器创建匹配选项的数组:

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>

以上内容将属性绑定到新的数组对象名称serverinfo，其中每个元素都与$scope.choices中的选择相关，可通过console.log( $scope.serverinfo[0].childname );

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 );

请注意，我还添加了ng-init="serverinfo[ $index ].id = choice.id"，将每个选择的id属性复制到由ngRepeat指令循环动态创建的新数组元素中.

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.

这篇关于在angularjs中使用ng-repeat动态添加div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！