사용자가 책을 클릭하면 새로운 모달이 열립니다. 책을 편집 할 수있는 곳. 양방향 바인딩을 사용하고 있기 때문에 모달에 입력하면 '디스플레이 페이지'가 자동으로 변경됩니다.
그러나 내가하고 싶은 것은 사용자가 취소 버튼을 누를 수 있도록 허용하는 것입니다. 그러면 책의 상태가 변경되기 전의 상태로 돌아갑니다. 돌아가서 전체 $ scope.books 객체를 재설정하지 않고도 Angular에서 가능합니까?
실제 응용 프로그램에서 이것은 API 호출이 될 것이며, 물론 완전히 필요한 경우가 아니면 다른 서버 호출을 작성하지 않을 것입니다. 이미 이것을 처리하는 패턴이 있습니까?
(function(){
var app = angular.module('ngModalDemo', ['ui.bootstrap'])
.controller('formController', function($scope, $modal, $log){
$scope.books = [
{ Id: 1, Name:'A Feast For Crows'},
{ Id: 2, Name:'Before they are Hanged'}
];
$scope.openModal = function (currentBook) {
var modalInstance = $modal.open({
templateUrl: 'SomeModal.html',
controller: [
'$scope', '$modalInstance', function($scope, $modalInstance){
$scope.editBook = currentBook;
$scope.saveModal = function (book) {
$modalInstance.close();
};
$scope.cancelModal = function () {
// Restore the previous state here!
$modalInstance.close();
};
}]
});
};
})
})();
<div ng-controller="formController">
<p ng-repeat="displayBook in books">
<a href="#" ng-click="openModal(displayBook)">{{displayBook.Name}}</a>
</p>
<script type="text/ng-template" id="SomeModal.html">
<form name="editForm" ng-submit="saveModal(editBook)" noValidate>
<div class="modal-header">
Name: <input ng-model="editBook.Name" required /><br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" ng-click="cancelModal()">Cancel</button>
<button class="btn btn-info" ng-disabled="editForm.$dirty && editForm.$invalid">Save</button>
</div>
</form>
</script>
</div>
임시로 개체의 전체 복사본을 만든 다음 필요한 경우 다시 설정할 수 있습니다.
var temp = angular.copy(currentBook);
$scope.editBook = currentBook;
$scope.saveModal = function (book) {
$modalInstance.close();
};
$scope.cancelModal = function () {
// Restore the previous state here!
angular.copy(temp, $scope.editBook);
$modalInstance.close();
};
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다