ブートストラップモーダルとアンギュラズで編集

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の中核機能である双方向データ結合のために起こります。

scopeに設定されたモーダルにFilterlistオブジェクトを渡すと、モーダルがデータテーブルのデータと直接通信し、リアルタイムで更新されます。

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

をモーダルに渡し：

あなたの条件を達成するために、あなたはあなたのコントローラでは、このようなFilterlistオブジェクトをcopyすべき

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

これは、オブジェクトの2つの異なるインスタンスをメモリに作成し、モーダルの変更がデータテーブルの他のものに反映されないようにします。

「更新」ボタンをクリックすると、updatedFilterlistの変更をFilterlistにコピーするコードを追加できます。