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

【问题标题】：Dynamic addition of div using ng-repeat in angularjs在angularjs中使用ng-repeat动态添加div
【发布时间】：2017-04-25 11:45:15
【问题描述】：

我是 angularjs 的初学者。我想在点击添加图标时动态添加一个 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>

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

我的输出是这样的，

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

【问题讨论】：

为什么总是将值绑定到serverinfo？你不应该把它绑定到choice in吗？
谢谢你的建议，我会努力实现的
您应该知道，在此更改之后，$scope.serverinfo 中将没有任何内容。如果您想在控制器中使用serverinfo，那么您应该使用serverinfo[ $index ].yourPropertyName - 这将为您提供一个数组，其中$scope.serverinfo 数组中元素的属性分别与$scope.choices 中的选项匹配
谢谢你的工作
阿隆你能把这个作为答案发帖吗

标签： html angularjs angularjs-ng-repeat angularjs-ng-model

【解决方案1】：

您当前将所有值绑定到同一个对象 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 指标创建匹配选项数组：

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

<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 );在控制器中可用

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

【讨论】：

嘿，在您之前对“编辑已保存”的评论中，我不明白您的意思？
@PraveenKumar 在刚刚删除的那个帖子上？
是的，同一个。
@PraveenKumar 只是对编辑的讽刺评论，将i'm 更改为I'm，并且评论的大小写相同:)
@PraveenKumar 我只记得this comment 所以我想让他们明白他们不应该做不必要的编辑（编辑链接）

【解决方案2】：

使用您重复的项目名称“选择”而不是 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，什么是serverInfo，它只能在HTML中看到

【解决方案3】：

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

 ng-model="choice.childname"

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

【讨论】：