Редактировать с помощью bootstrap modal и angulajs

Question

Я сделал bootstrap modal для редактирования конкретных данных из таблицы данных. Я могу открыть всплывающее окно и возможность получать мои данные, но, как я делаю некоторые изменения в текстовом поле модала, он также внезапно отражает таблицу данных (таблица данных находится в другом контроллере).

Я хочу отразить его в таблице данных, только если я нажимаю Обновление button. И если я нажму отменил, тогда должно быть прежнее значение.

Вот мой HTML код:

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

Вот Модальные HTML код:

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

Вот angularJS код:

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

Так, пожалуйста, кто-нибудь знает, где я я ошибаюсь !!! Спасибо заранее.

Answer 1

Это происходит из-за двусторонней привязки данных, которая является основной особенностью AngularJS.

Когда вы передаете Filterlist объект модального с scope набором для $scope, вы фактически давая модальный связь с данными в DataTable непосредственно, и обновлять его в режиме реального времени.

Для достижения ваших потребностей, вы должны copy на Filterlist объект, как это в вашем контроллере:

$scope.updateFilterlist = angular.copy($scope.Filterlist);

И передать его модальным:

<button ng-click="openModal(updateFilterlist)" class="btn btn-xs btn-primary" title="Edit"> 
    <i class="glyphicon glyphicon-edit"></i> 
</button> 

Или сделать это непосредственно в код вида:

<button ng-click="openModal(angular.copy(Filterlist))" class="btn btn-xs btn-primary" title="Edit"> 
    <i class="glyphicon glyphicon-edit"></i> 
</button> 

Это создаст два разных экземпляра объекта в памяти, так что изменения в одном в модальном не отразятся на другом в datatable.

Вы можете добавить код для копирования изменений, внесенных в updatedFilterlist, в Filterlist, когда нажата кнопка «Обновить».