配列から削除すると副作用が発生する

Question

私は注文を作成するためのフォームを作成しています。入力フィールドは動的で、ボタンで追加することができます。

すべての行の後に、削除ボタンがあります。削除ボタンがあれば、その行が削除されます。

このため、私はdelRow（）を機能させました。残念ながら、行が削除されるため、残っている行の値も削除されますが、入力フィールドはそのまま残ります。私は理由を理解できないようだ。

テンプレート：

<form> 
     <div class="form"> 
     <table> 
      <tr ng-repeat="row in rows"> 
       <td> 
       <input class="product" ng-model="row.product[$index]" placeholder="{{productPlaceholder}}" type="text"> 
       </td> 
       <td> 
       <input ng-model="row.amount[$index]" type="number" min="0"> 
       </td> 
       <td> 
       <button class="btn btn-primary btn-functionality btn-danger btn-del" ng-click="delRow($index)">x</input> 
       </td> 
      </tr> 
     </table> 

     <button class="btn btn-primary btn-success btn-add" ng-click="addRow()">+</button> 
     </div> 
     <div class="main-buttons"> 
     <button class="btn btn-primary btn-lg btn-create" ng-click="createOrder()">Create</button> 
     <button class="btn btn-primary btn-lg" ng-click="cancelOrder()">Cancel</button> 
     </div> 
    </form> 

コントローラー：

'use strict'; 

angular.module('myApp.orderNew', ['ngRoute']) 

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/order/new', { 
    templateUrl: 'order-new/order-new.template.html', 
    controller: 'OrderNewCtrl' 
    }); 
}]) 

.controller('OrderNewCtrl', function($scope, $location, $http, $log) { 

    $scope.$log = $log; 
    $scope.message ="test"; 

    $scope.rows = [{}]; 
    $scope.counter = 1; 
    $scope.productPlaceholder = 'Product'; 


    $scope.addRow = function() { 
    $scope.rows.push({}); 
    $scope.counter++; 
    } 

    $scope.delRow = function(index) { 
    if ($scope.rows.length < 2) { return; } 

    $scope.rows.splice(index, 1); 
    } 

    $scope.cancelOrder = function() { 
    $location.path('/orders'); 
    } 

    $scope.createOrder = function() { 
    var data = $scope.fields; 
    alert(data); 
    //$post('/path_to_server', obj); 
    } 

    $http.get('orders.json').then(function(data) { 
    $scope.orders = data; 
    }); 

}); 

Answer 1

の代わりに：

<input ng-model="row.product[$index]" type="number" min="0"> 

あなたはこれを行う必要があります。

<input ng-model="row.product" type="number" min="0"> 

行を削除するため、索引参照がスローされます。インデックス参照を使用する代わりに、値をオブジェクトの属性に直接置くことができます。

私はここで働いペンを手早く：

http://codepen.io/nilestanner/pen/gmyBRo?editors=1011