Question

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

我的输出是这样的，

我的问题就像我在文本框中输入的内容一样，它会自动复制到下一组。任何人都可以找出问题。

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

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

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

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

 ng-model="choice.childname"

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

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

3 个答案: