Agfdhyk

I am beginner in AngularJS and I am trying to edit table list object using below code and my modal form having save and cancel buttons.

As per my requirement when I click on save button then only object need to update and if I click on cancel button it should not update but using my below code even when I not tap on save button its automatically updating.

How can I do my requirement? Can some one help me please.

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

        };

    }]);

You should add/edit your user inside the controller myController, to do so, the modal needs to return the user:

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

        };

    }]);

The fact that we use angular.copy($scope.users); allows us to make sure the modal won't update your list of user.

This line: $uibModalInstance.close($scope.newUser) returns the value to the controller.

Your list is then updated in the modalInstance.result.then function.

I dont see ng-app being added or the controller being referenced anywhere in the HTML