Как редактировать объект списка таблиц в AngularJS

Question

Я новичок в AngularJS и пытаюсь отредактировать объект списка таблиц, используя приведенный ниже код и мою модальную форму с кнопками сохранения и отмены.

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

Как я могу выполнить мое требование? Может кто-нибудь помочь мне, пожалуйста.

add_user.html

<div>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">New User Registration</h4>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Username</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="Username" ng-model="newUser.username">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="Email" ng-model="newUser.email">
                </div>
            </div>

            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">Full Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputEmail3" placeholder="Full Name" ng-model="newUser.fullName">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="saveUser();">Save</button>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="close()">Close</button>
    </div>
</div>

app.js

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myController', ['$scope', '$uibModal', '$log',
    function ($scope, $uibModal, $log) {
        $scope.newUser = {};
        $scope.info = "";
        $scope.users = [
            { username: "rimon", fullName: "Md. Mamunur Rashid Rimon", email: "rimonmath@gmail.com" },
            { username: "shamim", fullName: "Md. Tamim Hossain", email: "shamim@gmail.com" },
            { username: "tamim", fullName: "Tamim Iqbal", email: "tamim@gmail.com" }
        ];

        $scope.addUser = function () {
            var modalInstance = $uibModal.open({
                templateUrl: 'add_user.html',
                controller: 'ModalInstanceCtrl',
                resolve: {
                    items: function () {
                        return $scope.users;
                    }
                }
            });
            modalInstance.result.then(function (selectedItem) {
                $scope.selected = selectedItem;
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        }

        $scope.editUser = function (index) {
            var modalInstance = $uibModal.open({
                templateUrl: 'add_user.html',
                controller: 'EditInstanceCtrl',
                resolve: {
                    user: function () {
                        var obj = {
                            arrayList: $scope.users,
                            position: index
                        }
                        return obj;
                    }
                }
            });
            modalInstance.result.then(function (selectedItem) {
                $scope.selected = selectedItem;
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };

        $scope.deleteUser = function () {
            console.log($scope.users.indexOf($scope.clickedUser));
            $scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
            $scope.info = "User Deleted Successfully!";
        };

        $scope.clearInfo = function () {
            $scope.info = "";
        };

    }]);


angular.module('myApp').controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance', 'items',
    function ($scope, $uibModalInstance, items) {
        $scope.saveUser = function () {
            $scope.users = items;
            $uibModalInstance.close();
            $scope.users.push($scope.newUser);
            $scope.info = "New User Added Successfully!";
            $scope.newUser = {};
        };

        $scope.close = function () {
            $uibModalInstance.dismiss('cancel');
        };
    }]);


angular.module('myApp').controller('EditInstanceCtrl', ['$scope', '$uibModalInstance', 'user',
    function ($scope, $uibModalInstance, user) {
        $scope.newUser = user.arrayList[user.position];
        $scope.users = user.arrayList;
        $scope.saveUser = function () {
            $scope.users[user.position] = $scope.newUser;
            $uibModalInstance.close();
        };
        $scope.close = function () {
            $uibModalInstance.dismiss('cancel');
        };
    }]);

Answer 1

Вы должны добавить / отредактировать своего пользователя внутри контроллера myController, для этого модал должен вернуть пользователя:

var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('myController', ['$scope', '$uibModal', '$log',
    function ($scope, $uibModal, $log) {
        $scope.newUser = {};
        $scope.info = "";
        $scope.users = [
            { username: "rimon", fullName: "Md. Mamunur Rashid Rimon", email: "rimonmath@gmail.com" },
            { username: "shamim", fullName: "Md. Tamim Hossain", email: "shamim@gmail.com" },
            { username: "tamim", fullName: "Tamim Iqbal", email: "tamim@gmail.com" }
        ];

        $scope.addUser = function () {
            var modalInstance = $uibModal.open({
                templateUrl: 'add_user.html',
                controller: 'ModalInstanceCtrl',
                resolve: {
                    items: function () {
                        return angular.copy($scope.users);
                    }
                }
            });
            modalInstance.result.then(function (newUser) {
                $scope.users.push(newUser);
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        }

        $scope.editUser = function (index) {
            var modalInstance = $uibModal.open({
                templateUrl: 'add_user.html',
                controller: 'EditInstanceCtrl',
                resolve: {
                    user: function () {
                        var obj = {
                            arrayList: angular.copy($scope.users),
                            position: index
                        }
                        return obj;
                    }
                }
            });
            modalInstance.result.then(function (user) {
                $scope.users[index] = user
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };

        $scope.deleteUser = function () {
            console.log($scope.users.indexOf($scope.clickedUser));
            $scope.users.splice($scope.users.indexOf($scope.clickedUser), 1);
            $scope.info = "User Deleted Successfully!";
        };

        $scope.clearInfo = function () {
            $scope.info = "";
        };

    }]);


angular.module('myApp').controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance', 'items',
    function ($scope, $uibModalInstance, items) {
        $scope.saveUser = function () {
            $uibModalInstance.close($scope.newUser);
        };

        $scope.close = function () {
            $uibModalInstance.dismiss('cancel');
        };
    }]);


angular.module('myApp').controller('EditInstanceCtrl', ['$scope', '$uibModalInstance', 'user',
    function ($scope, $uibModalInstance, user) {
        $scope.newUser = user.arrayList[user.position];
        $scope.users = user.arrayList;
        $scope.saveUser = function () {
            $uibModalInstance.close($scope.newUser);
        };
        $scope.close = function () {
            $uibModalInstance.dismiss('cancel');
        };
    }]);

Тот факт, что мы используем angular.copy($scope.users);, позволяет нам убедиться, что модал не обновит ваш список пользователей.

Эта строка: $uibModalInstance.close($scope.newUser) возвращает значение в контроллер.

Ваш список затем обновляется с помощью функции modalInstance.result.then.

Answer 2

Я не вижу, * добавляется ng-app или ссылка на контроллер в любом месте HTML