使用角度复制编辑ng重复项(在模态中）时，取消按钮不起作用

cancel button not working when editing a ng-repeat item (in a modal) using angular copy

本文关键字：模态 不起作用 按钮 取消 复制 编辑 ng      更新时间：2023-09-26

我已经创建了一个ng个块的重复，我想在模式窗口中编辑一个块，并取消窗口以放弃任何更改。我已经设法让模式窗口按照我的意愿工作和编辑块，但我正在尝试使用angular.copy创建原始元素的备份，并在单击取消时设置它。

这是我的ng重复的html：

  <div class="container" style="max-width: 600px;">
<div ng-repeat="block in blocks" class="text-muted" ng-drop="true" ng-drop-success="onDropComplete($index, $data ,$event)">
  <div class="row" ng-show="textBlock(block)" ng-click="showEditButtons()" ng-drag="true" ng-drag-data="block">
    <h4> {{ block.title }} </h4>
    <p> {{ block.body }} </p>
    <button class="btn btn-default" ng-show="showButtons"  ng-click="editBlock(block); modalUpdate(block)">Edit!</button>
    <button class="btn btn-default" ng-show="showButtons" ng-click="deleteBlock(block)">Delete!</button><br>
    <br>
  </div>
</div>
</div>

这是我的html模式：

  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
      <form class="form-group">
        <input class="form-control" placeholder="Title" type="text" ng-model="block.title" ng-model="titleText"/>
        <input class="form-control" placeholder="Main Body" type="text" ng-model="block.body" ng-model="bodyText"/>
        <button class="btn btn-success" type="submit" ng-click="saveBlock()">   Save  </button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
      </form>
    </div>
  </script>

这是控制器的模态部分：

$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
  animation: $scope.animationsEnabled,
  templateUrl: 'myModalContent.html',
  controller: function($scope, $uibModalInstance, block){
    $scope.backUp = angular.copy(block);
    $scope.block = block;
    $scope.saveBlock = function () {
      $uibModalInstance.close($scope.block);
    };
    $scope.cancel = function () {
      block = $scope.backUp;
      $uibModalInstance.dismiss('cancel');
    };
  },
  size: 'sm',
  resolve: {
    block: function () {
      return selectedBlock;
    }
  }
});

}；

然而，每次我单击"取消"时，对块的更改仍将保存，并且不会恢复任何内容。

任何帮助都会很棒！

尝试删除行

$scope.cancel = function () {
  // block = $scope.backUp; <--- this one
  $uibModalInstance.dismiss('cancel');
};

controller: function($scope, $uibModalInstance, block){
    $scope.backUp = angular.copy(block);
    $scope.block = block;
    // the above line does not create new instance of $scope.block instead links to block, so whenever $scope.block gets updated, block also gets updated

将您的代码更改为：

HTML:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <form class="form-group">
            <input class="form-control" placeholder="Title" type="text" ng-model="data.title" ng-model="titleText" />
            <input class="form-control" placeholder="Main Body" type="text" ng-model="data.body" ng-model="bodyText" />
            <button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </form>
    </div>
</script>

已更改ng模型以绑定到data对象

JS:

$scope.modalUpdate = function (selectedBlock) {
    var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'myModalContent.html',
        controller: function ($scope, $uibModalInstance, block) {
            $scope.data = {};
            $scope.data.title = block.title;
            $scope.data.body = block.body;
            $scope.saveBlock = function () {
                block.title = $scope.data.title;
                block.body = $scope.data.body;
                $uibModalInstance.close($scope.block);
            };
            $scope.cancel = function () {
                $uibModalInstance.dismiss('cancel');
            };
        },
        size: 'sm',
        resolve: {
            block: function () {
                return selectedBlock;
            }
        }
    });
};

只有在触发saveBlock时才分配给$scope.block，否则取消时不会发生任何事情

相关文章：