用引導程序模態和角度編輯

Question

我已經爲從我的數據表中編輯特定數據做了引導程序模式。 我可以打開彈出窗口並能夠獲取我的數據，但是由於我在模態文本框中進行了一些更改，它突然反映到數據表中（數據表在另一個控制器中）。

我想在數據表中反映它，僅當我點擊更新按鈕。 如果我點擊取消按鈕，那麼以前的值應該在那裏。

這裏是我的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，您可以有效地讓模式與直接在數據表中的數據通訊，並實時更新它。

要達到您的要求，您應該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> 

這將在內存中創建對象的兩個不同實例，以便在模式中對其中一個對象的更改不會反映在數據表的另一個實例中。

然後，您可以添加代碼，以便在單擊「更新」按鈕時將對updatedFilterlist所作的更改複製到Filterlist。