Edit with bootstrap modal and AngularJS - angularjs

Question

I have made bootstrap modal for edit particular data from my data-table.
I am able to open popup and able to fetch my data as well, but as i am doing some changes in modal's text box it is suddenly reflect to data-table also (data-table is in another controller).
I want to reflect it in data-table only if I am clicking Update button.
And if I click cancel button then the previous value should be there.
Here is my HTML code:
<tr ng-repeat="Filterlist in macAddressListResult" class="text-center">
<td>{{1+$index}}</td>
<td class="padding-top-8">
<span class="label" >{{Filterlist.status}}</span>
</td>
<td><span>{{Filterlist.macAddress}}</span></td>
<td>
<button ng-click="openModal(Filterlist)" class="btn btn-xs btn-primary" title="Edit">
<i class="glyphicon glyphicon-edit"></i>
</button>
<button class="btn btn-xs btn-danger" title="Delete">
<i class="glyphicon glyphicon-trash"></i>
</button>
</td>
</tr>
Here is Modal HTML code:
<div class="modal-header bg-color">
<h3 class="modal-title">Edit</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-2">
MacAddress
</div>
<div class="col-md-10">:
<input type="text" ng-model="mac.macAddress" name="macAddress" >
</div>
</div>
<br>
<div class="row">
<div class="col-md-2">
status
</div>
<div class="col-md-10">:
<select type="text" ng-model="mac.status" name="macAddress" >
<option ng-repeat="p in denyAllow">{{p}}</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok(mac)"> Save </button>
<button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>
Here is angularJS code:
app.controller('networkModeCtrl', function($rootScope, $scope, $state, networkModeService, $modal, $timeout){
$scope.openModal = function(mac){
var modalInstance = $modal.open({
templateUrl: 'partials/settings/macAddressEdit.html',
controller: 'macAddressEditCtrl',
controllerAs: 'vm',
scope: $scope,
resolve: {
mac: function () { return mac}
}
});
}
});
app.controller('macAddressEditCtrl', function($scope, $state, $stateParams, $modalInstance, mac, networkModeService, indexService){
$scope.mac = mac;
// === Get Mac address filter mode (allow/Deny) list === //
networkModeService.denyAllow().success(function(result){
$scope.denyAllow = result;
});
// === function to save mac staus ===//
$scope.ok = function(mac) {
$modalInstance.close();
};
// === function to cancel model === //
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
So, please anyone know me where I am going wrong!!!
Thanks in advance.

Answer 1

This is happening because of two-way data binding, which is the core feature of AngularJS.
When you pass the Filterlist object to the modal with scope set to $scope, you are effectively letting the modal communicate with the data in datatable directly, and updating it in real time.
To achieve your requirement, you should copy the Filterlist object like this in your controller:
$scope.updateFilterlist = angular.copy($scope.Filterlist);
And pass it to the modal:
<button ng-click="openModal(updateFilterlist)" class="btn btn-xs btn-primary" title="Edit">
<i class="glyphicon glyphicon-edit"></i>
</button>
Or do it directly in the view code:
<button ng-click="openModal(angular.copy(Filterlist))" class="btn btn-xs btn-primary" title="Edit">
<i class="glyphicon glyphicon-edit"></i>
</button>
This will create two different instances of the object in memory so that changes to one in the modal do not reflect on the other in the datatable.
You can then add code to copy the changes made to updatedFilterlist to Filterlist when 'Update' button is clicked.