AngularJS - 重置綁定對象的狀態

我已經做了一些非常簡單的重複一些書籍，當用戶點擊書本時，它會打開一個新的模式。他們可以在哪裏編輯這本書。當我使用雙向裝訂時，'顯示頁面'自動隨着我在模式上輸入而改變 - 這非常棒。AngularJS - 重置綁定對象的狀態

但是我想要做的是允許用戶按取消按鈕，並且書的狀態可以追溯到它被修改之前的狀態。在Angular中這可能不會返回並重置整個$ scope.books對象？

在實際的應用程序中，這將是一個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>

來源

2015-04-05 NewZeroRiot

您可以創建對象的深層拷貝到一個臨時，然後將其設置回來，如果neccessary：

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(); 
};

來源

2015-04-05 22:15:09 eladcon

角有方法copy，通過克隆對象或數組，使工作適合你。

這個想法是將您的數據的副本傳遞給模態，而不是實例本身。所以當用戶按Cancel時，主實例不會改變。

在您的情況相反：

$scope.editBook = currentBook;

寫：

$scope.editBook = angular.copy(currentBook);

來源

2015-04-05 22:15:21

考慮顯示模式，然後如果用戶取消重置之前緩存原始模型的副本。這可以直接通過JavaScript直接完成，或者您可以選擇使用Angular的$cacheFactory來應對更復雜的場景。

舉例來說，你可以添加一個索引到你的ng-repeat：

<p ng-repeat="displayBook in books track by $index"> 
    <a href="#" ng-click="openModal(displayBook, $index)"> 
      {{displayBook.Name}} 
    </a> 
</p>

然後改變你的控制器方法來重置$scope.books集合如果用戶取消模態：

$scope.openModal = function (currentBook, idx) {    
    // Cache the book, so that we can reset it later. 
    var cachedBook = angular.copy(currentBook); 
    var $outerScope = $scope; 

    var modalInstance = $modal.open({ 
     // ... 
     controller: [ 
      '$scope', '$modalInstance', function($scope, $modalInstance){ 
       $scope.editBook = currentBook; 
       $scope.saveModal = function (book) { 
        // ... 
       }; 
       $scope.cancelModal = function() { 
        // Restore the previous state 
        $outerScope.books[idx] = cachedBook; 

        // ... 
       }; 
      }] 
    }); 
};

如果您期望您的用戶比實際保存編輯時更頻繁地擊中Cancel，然後可能會考慮顛倒操作並傳遞書本的副本而不是原件，僅在修改原始後調用saveModal。

來源

2015-04-05 22:21:59 voithos

AngularJS - 重置綁定對象的狀態

回答

相關問題