Question

我有一个AngularJS应用程序，我在其中显示用户列表。用

检索用户

$resource.query()

可以通过单击列表来编辑用户，从而打开编辑弹出窗口。

如何更新资源，同时还允许用户取消编辑弹出窗口并还原任何更改？

即如果编辑弹出窗口直接使用$ resource-retrieval对象，如果用户取消编辑，如何“撤消”任何更改？

Answer 1

假设您在弹出元素上定义了UserEditController，并且是UserController的子节点。弹出窗口打开时，您可以制作用户的副本。

this.UserEditController = function($scope) {
   var previous_attributes = angular.copy($scope.user)

   var close = function() {
      $scope.mode = 'show';
   }

   $scope.cancel = function() {
      angular.extend($scope.user, previous_attributes);
      close();
   }

   $scope.save = function() {
      $scope.user.save();
      close();
   }

}

HTML

<div class="user" ng-controller="UserController">
  <strong>{{ user.name }}</strong>
  <button ng-click="editUser()">Edit</button>


  <ng-switch on="mode">
    <div ng-switch-when="edit" class="edit-user form" ng-controller="UserEditController">
      <input type="text" ng-model="user.name"> 
      <button ng-click="cancel($event); $event.preventDefault();">Cancel</button>
      <button ng-click="save($event); $event.preventDefault();">Save</button>
    </div>
  </ng-switch>

</div>

如果您使用指令打开弹出窗口，您可以为该指令定义一个控制器并在那里进行复制，这将使其可重复使用。

如何更新表单中的角度资源

1 个答案: