ng-repeat 및 ng-model을 사용하는 AngularJS 추가/제거 기능

Question

추가/제거 기능이있는 양식을 만듭니다. 이를 달성하기 위해 을 ng-repeat에 사용하려고했습니다. 내 코드는 다음과 같습니다.

<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에 작성했습니다.

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 = ""; 
    }; 
}]); 

당신은 이름, 이메일의 각을 저장해야합니다 및 전화는 별도의 모델입니다 :

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

이를 좋아하는 당신의 자바 스크립트를 변경

.

그런 다음 배열에 항목을 추가 할 때 재설정해야합니다.

또한 html에서 모델 이름을 변경하십시오.

체크 here.

Answer 3

그래서 기본적으로는 ITE "을 추진하고있어 m "- 매번 목록에 대한 참조이므로 하나의 항목에 대한 여러 참조 목록이 생깁니다.

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>