ng-repeat 배열에 각진 항목 추가

Question

ng-repeat에 대한 모델로 사용되는 배열에 항목을 동적으로 추가하는 데 문제가 있습니다.

plunker

은 여기에 있습니다 : http://plnkr.co/edit/W4b34EDR8dP7ems7aFRV?p=preview

나는 테이블 행의 목록을 가지고있다. 각 행에 내용이 각 행에 대해 동일한 선택 상자가 있습니다. select의 ng-model은 단순히 ng-repeat에서 항목으로 사용되는 문자열입니다 (설명하는 것이 더 어렵습니다!)

문제는 단추를 클릭 할 때입니다. 행을 추가합니다. 다음 단계를 따르십시오 :

1. "단계 추가"를 클릭하십시오. 새 행에 공백 값이 표시됩니다.
2. 새 행에서 항목 선택
3. "단계 추가"를 다시 클릭하십시오.

새 행이 추가되지만 선택 항목은 3 행에서 지워집니다. 왜 이런 일이 일어나고 어떻게 피할 수 있습니까? 나는 물론 Google에 노력했지만, Google에 단어를 찾는 것은 어려운 문제입니다.

<tr ng-repeat="phase in phases track by $index"> 
     <td>{{$index + 1}}</td> 
     <td><select ng-model='phase'> 
       <option ng-repeat="item in availablePhases" ng-value="item">{{item}}</option> 
      </select> 
     </td> 
    </tr> 

그리고 컨트롤러 :

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.phases = ['Phase 1', 'Phase 2']; 
    $scope.availablePhases = ['Phase 0', 'Phase 1', 'Phase 2', 'Phase 3']; 

    $scope.add = function() { 
    $scope.phases.push(''); 
    } 
}); 

감사

는 여기에 몇 가지 코드입니다!

Answer 1

당신은 모든 값에 동일한 model을 부여하고 있으므로 업데이트 한 경우 모두 업데이트했습니다. 나는 그것이 왜 처음 두 가지를 바꾸지 않았는지 확신하지 못한다. 이 작업 만

<select ng-model='phase'>

에

<select ng-model='phases[$index]'>