Html 使用angularjs中的ng repeat动态添加div

我是angularjs的初学者。 我想在单击add图标的同时动态添加一个div。我已经为此编写了一些脚本

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>

我的输出是这样的

---

我的问题就像我在文本框中输入的任何内容一样，它会自动复制到下一集。任何人都能解决这个问题。

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

 ng-model="choice.childname"

---

对其他输入执行相同的操作。如果希望serverinfo包含所有这些值，请复制它。

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

 ng-model="choice.childname"

---

对其他输入执行相同的操作。如果您希望serverinfo包含所有这些值，请复制它。

使用重复的项目名称“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>

服务器名
全名
必填字段
字段值
去除
添加

使用重复的项目名称“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>

服务器名
全名
必填字段
字段值
去除
添加

您当前正在将所有值绑定到同一对象

serverinfo

，并且由于您位于循环（

ng repeat

）内，因此循环中的每个字段都绑定到控制器中的同一对象

您有两个选择：

将字段绑定到

选项

元素：

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

上述操作将属性绑定到一个新的数组对象名

serverinfo

，其中每个元素都与

$scope.choices

中的一个选项相关，它将通过

console.log（$scope.serverinfo[0].childname）在控制器中可用

请注意，我还添加了
ng init=“serverinfo[$index].id=choice.id”
以将每个选项的
id
属性复制到由
ngRepeat
指令循环动态创建的新数组元素。
您当前正在将所有值绑定到同一对象
serverinfo
，由于您位于循环（
ng repeat
）中，因此循环中的每个字段都绑定到控制器中的同一对象

您有两个选择：

将字段绑定到
选项
元素：

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

上述操作将属性绑定到一个新的数组对象名
serverinfo
，其中每个元素都与
$scope.choices
中的一个选项相关，它将通过
console.log（$scope.serverinfo[0].childname）在控制器中可用

请注意，我还添加了
ng init=“serverinfo[$index].id=choice.id”
以将每个选项的
id
属性复制到由
ngRepeat
指令循环动态创建的新数组元素。
为什么总是将值绑定到
serverinfo
？您不应该将其绑定到
中的
选项吗？谢谢您的建议，我将尝试实现这一点，您应该知道，在进行此更改后，
$scope.serverinfo
中没有任何内容。如果要在控制器中使用
serverinfo
，则应使用
serverinfo[$index].yourPropertyName
-这将为您提供一个数组，其中
$scope.serverinfo
数组中元素的属性与
$scope.choices
中的选项相匹配。choices
分别感谢您的支持。您可以将此作为答案发布吗？为什么总是将值绑定到
serverinfo
？您不应该将其绑定到

中的

选项吗？谢谢您的建议，我将尝试实现这一点，您应该知道，在进行此更改后，
$scope.serverinfo
中没有任何内容。如果要在控制器中使用
serverinfo
，则应使用
serverinfo[$index].yourPropertyName
-这将为您提供一个数组，其中
$scope.serverinfo
数组中元素的属性与
$scope.choices中的选项相匹配。choices
分别感谢您的帮助。您可以将此作为答案发布吗？您在哪里有此serverinfo，什么是serverinfo，它只出现在HTMLAnd你在哪里有这个serverInfo，什么是serverInfo，它只出现在HTMLHey，在你之前关于“编辑保存”的评论中，我不明白你的意思？@PraveenKumar在刚刚被删除的帖子上？是的，同样的一条。@PraveenKumar只是对编辑的一个讽刺评论，它将
i'm
更改为
i'm
，并且注释的大小写相同：）@PraveenKumar我刚刚记得，所以我想让他们明白，他们不应该做不必要的编辑（编辑链接）嘿，在你之前关于“编辑保存”的评论中，我不明白你的意思？PraveenKumar在刚刚被删除的帖子上说？是的，同样的一条。@PraveenKumar只是对编辑的一条讽刺评论，它将
i'm
更改为
i'm
，并且注释的大小写相同：）@PraveenKumar我刚记起来，所以我想让他们明白，他们不应该做不必要的编辑（编辑链接）