如何在AngularJS中从数组编辑对象

Question

您好，我是AngularJS的初学者，我正在尝试使用以下代码和具有保存和取消按钮

的模式窗体来编辑数组对象

根据我的要求，当我单击“保存”按钮时，只有对象需要更新；如果我单击“取消”按钮，则该对象不应该更新，但是即使我不点击“保存”按钮，它也将自动更新

我该怎么办？就像我想要的一样，也暗示了我编写代码的方式好不好

add_user.html

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

app.js

{{1}}

Answer 1

您可以ng-model-options在哪里指定何时更新ng-model级别的form实际值。

<form class="form-horizontal" ng-model-options="{ updateOn: 'submit' } novalidate>
  ...
  ...
</form>