我正在尝试创建一个如下所示的表单,这是使用角度的ng-repeat指令,每当我创建一个新行时就会抱怨 “不允许在转发器中复制。”
虽然我理解这个问题的解决方案是通过“追踪$ index”,然而它会导致另一个问题,即在一行上单击删除会删除其他字段的值。所以我怀疑索引的跟踪对静态文本是好的,但不是输入形式。那么如何正确使用ng-repeat呢?请参阅我的JSFiddle了解演示。
我目前的代码:
HTML
<div class="row-fluid spacer10">
<a ng-click="addAKA()" class="btn btn-primary spacer5 left30"><i class="icon-plus icon-white"></i> Add New Alias</a>
</div>
<div class="row-fluid spacer10"></div>
<div class="row-fluid spacer5" ng-repeat="item in aliasList track by $index">
<input type="text" class="span6 left30" ng-model="item">
<button class="btn btn-danger" ng-click="deleteAKA($index)">delete</button>
<BR/>
</div>
的Javascript
$scope.addAKA = function ()
{
if($scope.aliasList == null)
{
$scope.aliasList = [];
}
$scope.aliasList.push("");
$scope.aliasjson = JSON.stringify($scope.aliasList);
}
$scope.deleteAKA = function (idx)
{
var aka_to_delete = $scope.aliasList[idx];
$scope.aliasList.splice(idx, 1);
$scope.aliasjson = JSON.stringify($scope.aliasList);
}
答案 0 :(得分:1)
只需更改迭代方式即可。而不是:
<div ng-repeat="item in aliasList track by $index">
这样做:
<div ng-repeat="item in aliasList">
$index
仍然可以在元素中使用,使用如下:
<button ng-click='deleteItem($index)'>Delete</button>
请参阅此JSFiddle以获取正确的解决方案
答案 1 :(得分:0)
您的方法存在多个问题。
由于您将字符串直接绑定到ng-model并且ng-repeat创建了子范围,因此对该值的任何更改都不会反映出来。将范围模型更改为
$scope.list = [{text:"one"},{text:"two"}];
并绑定到i.text
,而不是像之前那样绑定到i
。
使用item而不是index调用deleteItem方法。看到我的小提琴