Vfrdtyky

Hi i am beginner for angularJS and i am showing angular-ui modal form when click on button and have to add new user but i am really confusing how to handle and how to do this scenario and i tried below code but its not working can some one help me better way to do this

My requirement i want to open modal form for adding new user and when i click save button i need to add that new user in my array

main.js

    // create the module, pass in modules it depends on

    var app = angular.module('myApp', ['ui.bootstrap']);

    // $modal service is now available via the ui.bootstrap module we passed in to our module

    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',

                });

                modalInstance.result.then(function (selectedItem) {

                    $scope.selected = selectedItem;

                }, function () {

                    $log.info('Modal dismissed at: ' + new Date());

                });

            }



            $scope.saveUser = function () {

                console.log("Saving...");

                $scope.users.push($scope.newUser);

                $scope.info = "New User Added Successfully!";

                $scope.newUser = {};

            };



            $scope.selectUser = function (user) {

                $scope.clickedUser = user;

            };



            $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', function ($scope,$uibModalInstance) {

    $scope.saveUser = function () {

        alert("You clicked the ok button.");

        $uibModalInstance.close();

    };



    $scope.close = function () {

        alert("You clicked the cancel button.");

        $uibModalInstance.dismiss('cancel');

    };

});

Form.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>

From what I see, your problem lies in your declaration of FormController.js please try to change this code :

app.controller('ModalInstanceCtrl', ['$scope','$modalInstance',function ($scope, $modalInstance) {

   $scope.close = function () {

       $modalInstance.dismiss('cancel');

    };

  $scope.saveUser = function(){

         //SUBMIT FORM HERE

  }



}]);

for this one :

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, data) 

{

  var pc = this;

  pc.data = data;



  pc.ok = function () {

    //{...}

    alert("You clicked the ok button."); 

    $uibModalInstance.close();

  };



  pc.cancel = function () {

    //{...}

    alert("You clicked the cancel button."); 

    $uibModalInstance.dismiss('cancel');

  };

});

From your code I noticed that:

1. Your declaration of the modal controller misses the name of the main module app which sometimes is required.




2. you are using '$modalInstance' instead of $uibModalInstance

For further reference go here. Please try these changes and let me know if it works!