2

我在 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]中不行（删除最后一个）

为什么？

PS如果我设置：

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

这确实很好用，但为什么呢？不知道...

4

2 回答 2

0

试试这个：将执行删除：

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

要正确执行此操作，您应该使用指令，请参见此处：处理 DOM 操作 - AngularJS

于 2013-04-08T04:22:35.217 回答
0

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

    $scope.addInputRow = function(){
       index ++;
       $scope.controlNumberOfInputRows.push(index);      
    }

这句话做得很好，但为什么呢？不知道...

于 2013-04-09T01:45:12.620 回答