Question

我一直在尝试在HTML上实现一个与Angular JS集成的页面，基本上是在表格中动态添加/删除行。我已经使用splice函数删除了一行。我面临三个问题。

当我删除最后一行后添加新行时，会填充最近删除的数据。
如果我删除第二行并再次添加新行，则新行将填充前一行的数据。此外，当我尝试编辑行时，最后一行和第二行的值都会同时更改。
如果我添加空行并使用拼接删除它们，它们仍会保留在数组中，因为当我将数据提交给数据库时，我可以看到空白记录。

我对Angular很新。所以，任何帮助表示赞赏。

HTML：

<div class="form-group" ng-repeat="item in details track by $index">
  <div class="col-md-3">
    <select class="form-control" ng-model="DetailsName[item.id]" required>
                                            <option>Dropdown 1</option>
                                            <option>Dropdown 2</option>                                             
                                        </select>
  </div>
  <div class="col-md-7">
    <input type="text" class="form-control" ng-model="Details[item.id]" required>
  </div>
  <div class="col-md-1 ">
    <button class="remove " ng-show="!$first " ng-click="removeDetails($index) ">-</button>
  </div>
</div>
<button type="button " class="btn " ng-click="addDetail() ">Add Detail</button>
</div>

JS：

$scope.details = [{id:'detail1'}];
$scope.addDetail = function(){
    var newItemNo = $scope.details.length+1;
    $scope.details.push({'id':'detail'+newItemNo}); 
};

$scope.removeDetails = function (index) {
    $scope.details.splice(index,1);
  };

Answer 1

我认为问题与您生成ID的方式有关。

var newItemNo = $scope.details.length+1;

您从一个项目开始。其ID为detail1。添加项目会创建detail2。添加另一个会创建detail3。

现在删除detail2后会发生什么？你留下了[‘detail1’, ‘detail3’]。现在添加新项目会发生什么？

由于数组长度为2，而2 + 1 = 3，因此添加的项目变为detail3。你有两个detail3 s！

这有意义吗？奇怪的是，几个月前我遇到了同样的问题。它也是一个AngularJS应用程序。（尽管任何框架都可以轻松实现。）

Angular JS：在html

1 个答案: