無法使用角度js刪除動態添加的表單域

Question

我正在使用AngularJS v1.5.8。

在HTML

<div class="form-group row" data-ng-repeat="friend in friends track by $index"> 
      <label class="col-xs-1 control-label">Friend </label> 
      <div class="col-xs-2"> 
       <input type="text" class="form-control" required ng-model="friend.first_name" placeholder="First Name" /> 
      </div> 
      <div class="col-xs-2"> 
       <input type="text" class="form-control" required ng-model="friend.last_name" placeholder="Last Name" /> 
      </div> 
      <div class="col-xs-4"> 
       <input type="email" class="form-control" required ng-model="friend.email" placeholder="Email" /> 
      </div> 
      <div class="col-xs-2"> 
       <input type="text" class="form-control" ng-model="friend.phone" placeholder="Phone" /> 
      </div> 
      <div class="col-xs-1"> 
       <a href="#" ng-click="addMore($index)"><span class="glyphicon glyphicon-plus"></span></a> 
      </div> 
      <div class="col-xs-1"> 
       <a href="#" ng-click="removeFriend($index)"><span class="glyphicon glyphicon-remove"></span></a> 
      </div> 
      <div class="clearfix"></div> 

在控制器

$ scope.friends = {[FIRST_NAME： 「」，姓氏： 「」 電子郵件： 「」 手機 「」} ]。

$scope.addMore = function() { 
    console.log('in add'); 
    $scope.friends.push({ 
     first_name: "", 
     last_name: "", 
     email: "", 
     phone: "" 
    }); 
}; 

$scope.removeFriend = function(index) { 
    console.log("in remove: "+index); 
    $scope.friends.splice(index,1);//delete last row in html form..am I expecting something wrong.... 
}; 

，而我檢查代碼，我得到removeList($index)，而不是我希望removeList(1)或removeList(4)。

什麼可能是錯的？

我有兩個問題 - 爲什麼即使我正確地傳遞指數，它最終會刪除最後一個元素 - 輸入數據如何將角被更新...

如果你有一些教程的內容，請分享鏈接

Answer 1

這裏沒有必要，因爲我們沒有使用重複鍵通過索引使用的軌道。 請使用下面的代碼

<div ng-app="myApp" ng-controller="myCtrl"> 
<div class="form-group row" data-ng-repeat="friend in friends"> 
    <label class="col-xs-1 control-label">Friend </label> 
    <div class="col-xs-2"> 
     <input type="text" class="form-control" required ng-model="friend.first_name" placeholder="First Name" /> 
    </div> 
    <div class="col-xs-2"> 
     <input type="text" class="form-control" required ng-model="friend.last_name" placeholder="Last Name" /> 
    </div> 
    <div class="col-xs-4"> 
     <input type="email" class="form-control" required ng-model="friend.email" placeholder="Email" /> 
    </div> 
    <div class="col-xs-2"> 
     <input type="text" class="form-control" ng-model="friend.phone" placeholder="Phone" /> 
    </div> 
    <div class="col-xs-1"> 
     <a href="#" style="margin-left:120px;" ng-click="removeFriend($index)"><span class="glyphicon glyphicon-remove">Remove</span></a> 
    </div> 
</div> 
<div class="col-xs-1"> 
    <a href="#" ng-click="addMore($index)"><span class="glyphicon glyphicon-plus">Add</span></a> 
</div> 
</div>   
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
<script> 
    var app = angular.module('myApp', []); 
    app.controller('myCtrl', function($scope) 
    {  
     $scope.friends = [{first_name: "", last_name: "", email: "", phone: ""}]; 
     $scope.addMore = function() { 
      console.log('in add'); 
      $scope.friends.push({ 
       first_name: "", 
       last_name: "", 
       email: "", 
       phone: "" 
      }); 
     }; 
     $scope.removeFriend = function(index) 
     { 
      console.log("in remove: "+index); 
      $scope.friends.splice(index,1);//delete last row in html form..am I expecting something wrong.... 
     }; 
    }) 
</script> 

Answer 2

我覺得你有一些錯別字：

$scope.removeList = function(referIndex) { 
      console.log("in remove: " + referIndex); // note it is + not . 
      $scope.lists.splice(referIndex, 1); // note $scope.lists not $scope.list 
     };