2016-08-08 2 views
1

여기에 JS 코드가 있습니다.입력 값을 업데이트하면 angularJS 배열의 해당 입력 값이 모두 업데이트됩니다.

angular.module('myApp', []) 
.controller("myController", [function() { 
    this.master = []; 

    this.addUser = function(user) { 
       this.master.push(user) 
    }; 

    this.removeUser = function(user) { 
     var indexToRemove = this.master.indexOf(user); 
     this.master.splice(indexToRemove,1) 
    } 

    this.reset = function() { 
     this.user = this.master[this.master.length - 1]; 
    } 

}]) 

여기 내 HTML 부분입니다.

<body ng-app="myApp" ng-controller="myController as Cntrl"> 
    <form> 
     Name: <input type="text" ng-model="user.name" /> <br /> 
     Email: <input type="email" ng-model="user.email" /> <br /> 
     Gender: <input type="radio" ng-model="user.gender" value="male" /> Male 
     <input type="radio" ng-model="user.gender" value="female" /> female <br /> <br /> 

     <input type="button" ng-click="Cntrl.addUser(user)" value="Add User"> 

     <input type="button" ng-click="Cntrl.reset()" value="Reset User"> 

    </form> 

    <div ng-repeat="users in Cntrl.master track by $index"> 
     <span ng-click="Cntrl.removeUser(users)" >X</span> <pre>{{users | json}}</pre> 

    </div> 

</body> 

새 사용자를 추가하고 선택한 사용자를 삭제할 수 있습니다. 그러나 새 사용자를 추가 할 때마다 배열에있는 모든 이전 사용자의 등록 정보가 새로 추가 된 사용자의 등록 정보로 업데이트됩니다.

여기에 실수를 설명해주십시오.

답변

0

모든 사용자가 동일한 하나이며,보다 효율적으로 사용하는 인덱스를 제거 배열로 밀어 = "Cntrl.removeUser ($ 지수)"

angular.module('myApp', []) 
 
    .controller("myController", [ 
 
    function() { 
 
     this.master = []; 
 
     this.user = this; 
 

 
     //use this.user 
 
     this.addUser = function() { 
 
     this.master.push(this.user) 
 
     this.user = {} 
 
     }; 
 

 
     //use index 
 
     this.removeUser = function(index) { 
 
     this.master.splice(indexToRemove, 1) 
 
     } 
 

 
     this.reset = function() { 
 
     this.user = this.master[this.master.length - 1]; 
 
     } 
 

 
    } 
 
    ])

0

당신이 제공됩니다 NG 클릭 마스터 배열에 대한 사용자 참조 및 양방향 데이터 바인딩으로 인해 값이 업데이트되므로이 작업을 시도해 볼 수 있습니다.

다음과 같이 addUser 메소드를 수정하면됩니다. 이미 질문에 대한 답 3 개 게시물이 있었다으로 객체의 전체 복사본을 만듭니다

 this.addUser = function(user) { 
     this.master.push(angular.copy(user)); 
    }; 

각 복사, 문서 https://docs.angularjs.org/api/ng/function/angular.copy

0

를 참조하십시오. 하지만 난 VM에 당신의 코드에서 구현하려는 접근법에 심각한 논리적 오해가 있다고 생각합니다. 프로그램 은 현재 작동하지만 솔루션을 계속 진행하기 전에 John Papa의 자습서를 읽어 보시기 바랍니다. 이렇게하면 의 기본 사항이 명확 해지고 이전에 이 작동하지 않는 이유를 이해하게됩니다.

https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/

관련 문제