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

问题描述

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

HTML 部分:

<label for="childname" class="childname" >ServerName </label><input ng-model="serverinfo.childname" type="text" required="required" placeholder="name"/><label for="childname" class="childname" >全名</label><input ng-model="serverinfo.childfullname" type="text" required="required" placeholder="fullname"/><label for="childname" class="childname" >必填字段</label><input ng-model="serverinfo.field" type="text" required="required" placeholder="city/county.."/><label for="childname" class="childname" >字段值</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>
<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，并且因为您处于循环内 (ng-repeat) 然后循环中的每个字段都绑定到控制器中的同一个对象.

您有两个选择:

将字段绑定到 choice 元素:

<input ng-model="choice.childname" type="text" required="required" placeholder="name"/>

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

在控制器中使用

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

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

<div ng-show="child" class="childDiv" data-ng-repeat="choice in choice track by $index" ng-init="serverinfo[ $index ].id = choice.id"><input ng-model="serverinfo[ $index ].childname" type="text" required="required" placeholder="name"/>

上面将属性绑定到一个新的数组对象名称serverinfo，其中每个元素都相对于$scope.choices中的一个选项，它将在控制器通过 console.log( $scope.serverinfo[0].childname );

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

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

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

$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 output is like this,

My issue is like whatever I input in the textbox, it will automatically copy to the next set. Can anyone figure out the issue.

解决方案

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.

You have two options:

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>

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

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>

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

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