Angularjs动态添加和删除输入

Question

我的密码 jsfiddle .

HTML

<div ng-controller="MyCtrl">
  <input>
  <button ng-click='add()'>Add</button>
  <br/>
  <b>Items Added Below</b>
  <div ng-repeat='item in items'>
    <input ng-model='item' id='item-{{$index}}' class='input-{{$index}}'/>
    <button ng-click='del($index)'>DEL</button>
  </div>
</div>

Angular Controller

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
  $scope.items = [];
  $scope.newitem = '';
  $scope.add = function(){
    if ($scope.items.length < 4) {
      $scope.items.push($scope.newitem);
    }
  }
  $scope.del = function(i){
    $scope.items.splice(i,1);
  }
}

我尝试通过 ng-click 动态添加输入并删除特定但始终删除最后一个输入..
我认为这是因为它们在项目数组中没有区别。
我该如何解决这个问题？

Answer 1

这有两个部分:

1. 您没有绑定(bind)您的第一个输入(在添加旁边)。这意味着您只是将 '' 添加到数组中。据我所知，angularjs 通过按键跟踪，默认情况下不是索引。这使我进入第 2 部分。
2. 您使用的是旧版 AngularJS，根据 docs没有选项“{expr} track by $index”。看1.4.4 docs了解这方面的信息。

所以我可能会使用最新的稳定版 AngularJS 并确保您的第一个输入绑定(bind)到 $newitem。