ng-repeatとng-modelを使用したAngularJSの追加/削除機能

Question

追加/削除機能を持つフォームを作成しています。これを達成するために、私はにng-modelを使用しようとしました。私のコードは次のようになります。

<button ng-click='add()'>Add more</button> 
<div ng-repeat='x in array track by $index'> 
    <input ng-model='array[$index].name'></input> 
    <input ng-model='array[$index].phone'></input> 
    <input ng-model='array[$index].email'></input> 
</div> 

//angular module 
$scope.add = function() { 
    $scope.array.push(item); 
}; 

しかし、すべての入力フィールドは同期され、配列内のすべてのアイテムは同じように見えますが、それは私が意図していないものです。 また、codepenに私のコードのサンプルを作成しました。

Answer 1

itemを押すたびに、同じオブジェクトへの参照がプッシュされます。したがって、入力フィールドを変更すると、すべての配列ノードの更新が表示されます。それらは同じitemを参照します。

クイックフィックスは$scope.add()に代わりにアイテム自体の、アイテムのコピーをプッシュすることです：

var Item = function(){ 
    return { 
     name: '', 
     phone: '', 
     email: '' 
    }; 
}; 

：

$scope.array.push(angular.copy(item)); 

良い方法は、あなたがインスタンス化できるオブジェクトとしてitemを持つことです

その後、

$scope.array.push(new Item()); 

Answer 2

がこれを好きにあなたのjavascriptを変更

：

angular.module('myapp', []) 
.controller('Ctrl', ['$scope', '$compile',function ($scope, $compile) { 
    $scope.array = []; 

    var item = { 
    name: '', 
    phone: '', 
    email: '', 
    }; 

    $scope.array.push(item); 
    $scope.addItem = function() { 
    item.name = $scope.name; 
    item.phone = $scope.phone; 
    item.email = $scope.email; 
    $scope.array.push(item); 
    $scope.name = ""; 
    $scope.phone = ""; 
    $scope.email = ""; 
    }; 
}]); 

あなたが名前のそれぞれを保存する必要があります、電子メールや電話は別のモデルです。

その後、アレイにアイテムを追加するときにリセットしてください。

また、htmlでモデルの名前を変更します。

チェックhere。

Answer 3

だから、基本的には「ITEをプッシュしていますm "を参照するので、1つの項目に対する複数の参照のリストが表示されます。

angular.module('myapp', []) 
.controller('Ctrl', ['$scope', '$compile',function ($scope, $compile) { 
    $scope.array = []; 
    var item = { 
    name: '', 
    phone: '', 
    email: '', 
    }; 

    $scope.array.push(item); 
    $scope.addItem = function() { 

    $scope.array.push(
     { 
     name : '', 
     phone: '', 
     email: '',   
     }  
    ); 

    }; 
}]); 

が、それは動作します：

あなたのような何かを行うことができます。 htmlへの個人的な意見。

<div ng-repeat='x in array'> 
    <input ng-model='x.name'></input> 
    <input ng-model='x.phone'></input> 
    <input ng-model='x.email'></input> 
</div>