在 angularjs 中使用 ng-repeat 动态添加 div

Question

我是 angularjs 的初学者。我想在单击添加时动态添加一个 div icon.I 已经为此做了一些脚本。

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

我的输出是这样的，

我的问题是我在文本框中输入什么，它会自动复制到下一组。谁能解决这个问题。

Answer 1

那是因为您将相同的 ng 模型绑定到每个重复对象。放

 ng-model="choice.childname"

对其他输入做同样的事情。如果您希望 serverinfo 包含所有这些值而不是复制它。

Answer 2

使用您重复的项目名称 "choice" 而不是 serverInfo 应该可以解决问题

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

Answer 3

您目前正在将所有值绑定到同一个对象 serverinfo，并且因为您在一个循环中 (ng-repeat)，所以循环中的每个字段都绑定到同一个对象在控制器中。

您有两个选择：

将字段绑定到 choice 元素：

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

在控制器中可用

使用 $index 指标创建匹配选项数组：

当您不想 overwrite/change 原始数组的值时，这是一个很好的解决方案。

<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 中的一个选项相关，它将通过 [=19= 在控制器中可用]

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

在 angularjs 中使用 ng-repeat 动态添加 div

Dynamic addition of div using ng-repeat in angularjs

html

angularjs

angularjs-ng-repeat

angularjs-ng-model