Myujth

Hi i am beginner in AngularJS and i am trying to edit array 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? as like what i want an also suggest the way i am writing code is good or not

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 can ng-model-options where you can specify when you want to update ng-model actual value of form level.

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