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 - 重置绑定对象的状态

回答

相关问题