2012-08-05 8 views
4

시나리오 : 사용자가 항목을 클릭합니다. 다음 코드가 실행되고 항목 이름이 채워진 텍스트 상자가있는 모달이 열립니다.AngularJS의 모달을 통해 객체 편집 - 임시 객체 사용?

$scope.edit = function (item) { 
    $scope.editingItem = { Name: item.Name }; 
}; 

내 모달 내에서 HTML이 제대로 작동

<input type="text" ng-model="editingItem.Name"/> 

, 모달 쇼 (ng-show 사용) 텍스트 상자는 항목의 이름으로 채워집니다.

저장 버튼을 누르기 전까지 원래 객체가 (AngularJS 자동 데이터 바인딩을 통해) 변경되지 않기 때문에 새로운 객체를 사용하여 텍스트 상자를 채 웁니다.

다음이 HTML : 비록 update 방법에 무엇을 넣어하는 것입니다

$scope.update = function (item) { 
    // What do I put in here to update the original item object that was passed 
    // into the edit function at the top of this question?! 
}; 

내 문제 :

<a href="" ng-click="update(editingItem)">Save</a> 

에 이르게? 원래 item (항목 배열에서 보유)을 업데이트하고 싶습니다.

답변

4

내가 이런 짓을 했을까 :

$scope.edit = function (item) { 
    $scope.editingItem = { Name: item.Name }; 
    $scope.originalItem = item;//store the instance of the item to edit 
}; 

$scope.update = function (item) { 
    $scope.originalItem.Name = item.Name;//copy the attributes you need to update 
    //clear temp items to remove any bindings from the input 
    $scope.originalItem = undefined; 
    $scope.editingItem = undefined; 
}; 
+0

을 놀랍게도 이것이 내가 솔루션을 달성하는 방법을 정확히! 확인해 주셔서 감사합니다. – Greg

+0

기꺼이 도와 드리겠습니다. –