WedX - журнал о программировании и компьютерных науках

кнопка отмены не работает при редактировании элемента ng-repeat (в модальном режиме) с использованием угловой копии

Я создал ng-repeat блоков, где я хотел бы отредактировать блок в модальном окне и отменить окно, чтобы отменить любые изменения. Мне удалось заставить модальное окно работать и редактировать блоки, как я хочу, однако я пытаюсь использовать angular.copy для создания резервной копии исходного элемента и установки его при нажатии кнопки «Отмена».

вот мой html для моего 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>

и вот мой 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;
    }
  }
});

};

Однако каждый раз, когда я нажимаю кнопку «Отмена», изменения в блоке все еще сохраняются, и ничего не возвращается.

Любая помощь будет потрясающей!



Ответы:


1

Попробуйте убрать строку

$scope.cancel = function () {
  // block = $scope.backUp; <--- this one
  $uibModalInstance.dismiss('cancel');
};
31.08.2016
  • Первоначально у меня не было этой строки, однако ее удаление не имело значения, и новые значения всегда сохраняются, когда я нажимаю кнопку «Отмена». 31.08.2016
  • Было бы неплохо использовать backUp внутри модального окна. Не сам блок. А если нажать сохранить - вернуть модель backUp и назначить ее блоку. А если нажать отмену - просто закрыть модальное окно. 31.08.2016
  • Я переместил $scope.block = block в функцию сохранения, но блок вообще не обновляется. 31.08.2016

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

    Назначается $scope.block только в том случае, если saveBlock срабатывает, в противном случае при отмене ничего не происходит

    31.08.2016
  • @SachinKaria - круто, пожалуйста, отредактируйте настройку в ответе выше и примите ответ, который может помочь и другим 31.08.2016
  • сделал! единственное, теперь существующий текст блока не появляется на форме редактирования 31.08.2016
  • Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]