gpt4 book ai didi

javascript - 使用 ng-repeat 添加/删除 DOM 元素 <input>

转载 作者:行者123 更新时间:2023-11-30 06:33:54 25 4
gpt4 key购买 nike

我在 Angularjs 中有一个问题,我尝试使用 ng-repeat 为用户添加/删除 DOM 元素输入和按钮,以便他们可以使用按钮添加或删除输入元素。

事实上,我的代码为此做好了准备。

这是html代码:

<a class="btn pull-right" ng-click="addInputRow()">add input</a>    
<p class="" ng-repeat="item in controlNumberOfInputRows">
<span>NO.{{$index+1}}</span>
name:<input name="name" type="text" class="span2" />
phone:<input name="phone" type="text" class="span2" />
ID:<input name="ID" type="text" class="span3" />
<a class="class" ng-click="deleteThis($index)">X</a>
</p>

javascript代码:

myModule.controller('MainCtrl', function($scope,$http){

$scope.controlNumberOfInputRows = [];

$scope.addInputRow = function(){

$scope.controlNumberOfInputRows.push(0);

}

$scope.deleteThis = function(st){
$scope.controlNumberOfInputRows.splice(st,1);

};

但是这段代码在用户删除项目时有一个错误,仅限 Angulayjs删除最后一个。

如果我设置:

$scope.controlNumberOfInputRows = [0,1,2,3,4];

它在 [0]~[4] 中工作得很好,用户可以按索引删除项目,但不在[5]~[X](删除最后一个)

为什么?

附言如果我设置:

$scope.controlNumberOfInputRows = [0,1,2,3,4];

它在[0]~[4]中工作得很好,用户可以按索引删除项目

name[Wells] Phone[123] ID[1] X
name[Wells] Phone[123] ID[2] X
name[Wells] Phone[123] ID[3] X << delete this
name[Wells] Phone[123] ID[4] X
name[Wells] Phone[123] ID[5] X

然后我们得到:

name[Wells] Phone[123] ID[1] X
name[Wells] Phone[123] ID[2] X
name[Wells] Phone[123] ID[4] X
name[Wells] Phone[123] ID[5] X

如果我们使用添加输入

name[Wells] Phone[123] ID[1] X
name[Wells] Phone[123] ID[2] X
name[Wells] Phone[123] ID[3] X
name[Wells] Phone[123] ID[4] X
name[Wells] Phone[123] ID[5] X
name[Wells] Phone[123] ID[6] X
name[Wells] Phone[123] ID[7] X
name[Wells] Phone[123] ID[8] X << delete this
name[Wells] Phone[123] ID[9] X

然后我们得到:

name[Wells] Phone[123] ID[1] X
name[Wells] Phone[123] ID[2] X
name[Wells] Phone[123] ID[3] X
name[Wells] Phone[123] ID[4] X
name[Wells] Phone[123] ID[5] X
name[Wells] Phone[123] ID[6] X
name[Wells] Phone[123] ID[7] X
name[Wells] Phone[123] ID[8] X

我想我通过杂技解决了我的问题:

    var index = 0;
$scope.controlNumberOfInputRows = [];
$scope.addInputRow = function(){
index ++;
$scope.controlNumberOfInputRows.push(index);
}

这确实工作得很好,但为什么呢?不知道...

最佳答案

试试这个:将执行删除操作:

<a class="btn pull-right" ng-click="addInputRow()">add input</a>    
<p class="" ng-repeat="(key,value) in controlNumberOfInputRows">
<span>NO.{{value+1}}</span>
name:<input name="name" type="text" class="span2" />
phone:<input name="phone" type="text" class="span2" />
ID:<input name="ID" type="text" class="span3" />
<a class="class" ng-click="deleteThis($index)">X</a>
</p>

要正确执行此操作,您应该使用此处的指令:Dealing with DOM Manipulations - AngularJS

关于javascript - 使用 ng-repeat 添加/删除 DOM 元素 &lt;input&gt;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15870918/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com