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

0
votes

I have created a ng-repeat of blocks where I would like to edit a block in a modal window and cancel the window to discard any changes. I have managed to get the modal window working and editing blocks as I want however I am trying to use angular.copy to create a backup of the original element and set it when cancel is clicked.

here is my html for my ng-repeat:

  <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>

and here is my html for the modal:

  <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>

and here is the modal part of the controller:

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

};

However every time I click cancel the changes to the block are still saved and nothing is reverted.

Any help would be awesome!

2
javascriptangularjsangularjs-ng-repeatbootstrap-modal
May I know which version of AngularJS you are using? – David R
Do you get any errors in the console? – David R
No there are no errors in the console. After I assign the block the angular.copy value I plugged in a console.log and it has re-assigned however changes don't show – Sachin Karia
$scope.backUp = angular.copy(block); should be used as initialisation. If you want to update an object the correct usage is: angular.copy(block,$scope.backUp); Check the doc – gianlucatursi
I've consoled logged $scope.backUp and it is a copy of the original block as expected. However it seems as though the cancel function is not assigning it properly. – Sachin Karia

2 Answers

0
votes

Try to remove the line

$scope.cancel = function () {
  // block = $scope.backUp; <--- this one
  $uibModalInstance.dismiss('cancel');
};
0
votes
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

Change Your code as :

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>

Have changed ng-model to bind to data object

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

Have assigned to $scope.block only if saveBlock is triggered otherwise nothing happens on cancel