javascript - AngularJS 绑定(bind)表格，尽管单击取消或取消更改

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>

我有一个应用程序，它是一个带有数据和编辑按钮的表格，该应用程序打开一个模态来编辑表中的每一行，我的问题是当我尝试编辑模态表单中的任何值然后单击取消时；我发现更新后的值在 TableView 中发生了变化。如果可以使用 AngularJS 解决这个问题，我该如何解决？

Answer 1

问题是，在您的 dataModal.html View 中，您在输入中使用双向数据绑定(bind)与 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