AngularJS связывает таблицу, хотя нажмите отменить или отменить изменение

Question

  var FormModule = angular.module('FormModule', []);
FormModule.controller("formCtrl", function ($scope, $http, $uibModal, $rootScope) {
$scope.dataItems=[{id:1,name:"bla",Description:"blabla"},
{id:2,name:"bla",Description:"blabla"}];
  //function Edit
    $scope.editColumn = function (data) {
        var ObjResolve = function () {
            return data;
        }
       
        $uibModal.open({
            animation: true,
            templateUrl: 'dataModal.html',
            controller: 'ModalInstanceCtrl',
            resolve: {
                ObjResolve
            }
        }).result.catch(function (res) {
            if (!(res === 'cancel' || res === 'escape key press')) {
                //throw res;
            }
        });
    };
});
FormModule.controller("ModalInstanceCtrl", function ($scope, $uibModalInstance, $http, ObjResolve, $rootScope) {    
  $scope.data = ObjResolve;
});

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <table>
        <thead>
            <tr>
                <th>
                   col1
                </th>
                <th>
                    col2
                </th>
                <th>
                    Options
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="data in  dataItems">
                <td>{{ data.name }}</td>
                <td>{{ data.Description }}</td>
                <td>
                    <a ng-click="editColumn(data)" id="btnEdit">Edit</a>
                </td>
            </tr>
        </tbody>
    </table>
<script type="text/ng-template" id="dataModal.html">
    <form name="modalForm">
        <div class="modal-header">
            <h3 class="modal-title">Business Types</h3>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-sm-6">
                    <label>name</label>
                    <input type="text" class="form-control"  ng-model="data.name" ng-readonly="isReadOnly" />
                </div>
                <div class="col-sm-6">
                    <label>Description</label>
                    <input type="text" class="form-control"  ng-model="data.Description"  />                    
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-success" type="button" ng-click="save()"
                    > Save
            </button>
            <button class="btn btn-danger" type="button" ng-click="cancel()">Cancel</button>
        </div>
        </form>
    </script>

У меня есть приложение, которое представляет собой таблицу с данными и кнопку редактирования, которая открывает модальное окно для редактирования каждой строки в таблице, моя проблема заключается в том, когда я пытаюсьчтобы отредактировать любое значение в модальной форме и затем нажать «Отмена», я обнаружил, что обновленное значение изменяется в табличном представлении. Как я могу решить это, если оно может быть решено с помощью AngularJS?

Answer 1

Что вы можете сделать в этом случае, когда вы открываете модель по щелчку, затем объявляете другой объект и сохраняете объект, свойства которого вы собираетесь изменить, в форме редактирования, а затем при нажатии кнопки отмены снова помещаете эту клонированную переменную объекта в этот исходный объектиз которого вы его клонировали, это решит вашу проблему.

Спасибо Sanjeet

Answer 2

Проблема в том, что в вашем представлении dataModal.html вы используете двустороннее связывание данных во входах с уникальным экземпляром ObjResolve, поэтому при редактировании входа в модальное изменение заполняетсяв объекте.

Что бы я сделал, это сделал бы копию объекта при переходе к модальному и назначил его обратно в случае, если вы принимаете изменения:

Код AngulaJS

var FormModule = angular.module('FormModule', []);
    FormModule.controller("formCtrl", function ($scope, $http, $uibModal, $rootScope) {
        $scope.dataItems=[{id:1,name:"bla",Description:"blabla"},
        {id:2,name:"bla",Description:"blabla"}];
          //function Edit
            $scope.editColumn = function (data) {
                var ObjResolve = function () {
                    return angular.copy(data);
                }

                var modalInstance = $uibModal.open({
                    animation: true,
                    templateUrl: 'dataModal.html',
                    controller: 'ModalInstanceCtrl',
                    resolve: {
                        ObjResolve
                    }
                }).result.then(function (selectedItem) {
                    angular.forEach($scope.dataItems, function(item){
                        if(item.id == selectedItem.id){
                            item.name = selectedItem.name;
                            item.Description = selectedItem.Description;
                        }
                    });
                });


            };
        });
        FormModule.controller("ModalInstanceCtrl", function ($scope, $uibModalInstance, $http, ObjResolve, $rootScope) {

          $scope.data = ObjResolve;
          $scope.onAccept = function(){
              $uibModalInstance.close($scope.data);
          }

        });

HTML-код

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js" </script>
<table>
                <thead>
                    <tr>
                        <th>
                           col1
                        </th>
                        <th>
                            col2
                        </th>

                        <th>
                            Options
                        </th>
                    </tr>

                </thead>
                <tbody>
                    <tr ng-repeat="data in  dataItems">
                        <td>{{ data.name }}</td>
                        <td>{{ data.Description }}</td>

                        <td>
                            <a ng-click="editColumn(data)" id="btnEdit">Edit</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        <script type="text/ng-template" id="dataModal.html">
            <form name="modalForm">
                <div class="modal-header">
                    <h3 class="modal-title">Business Types</h3>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6">
                            <label>name</label>
                            <input type="text" class="form-control"  ng-model="data.name" ng-readonly="isReadOnly" />

                        </div>
                        <div class="col-sm-6">
                            <label>Description</label>
                            <input type="text" class="form-control"  ng-model="data.Description"  />

                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button class="btn btn-success" type="button" ng-click="onAccept()">
                        Save
                    </button>
                    <button class="btn btn-danger" type="button" ng-click="cancel()">Cancel</button>
                </div>
            </form>

        </script>

ОБНОВЛЕНИЕ

Добавлен JSFiddle с описанным решением jsfiddle

Answer 3

Трудно помочь без кода, но это более вероятно, когда вы редактируете, хотя вы нажимаете кнопку отмены, значение уже является обязательным, поэтому нажатие кнопки отмены не будет кнопкой отмены, а просто закроет параметр редактирования.

Вам, вероятно, понадобится загрузить данные другим способом, но, как я уже сказал, трудно не увидеть, не увидев их.Надеюсь это поможет!