부트 스트랩 모달 및 각도로 편집

Question

내 데이터 테이블에서 특정 데이터를 편집하기위한 부트 스트랩 모달을 만들었습니다. 팝업을 열 수 있고 내 데이터를 가져올 수도 있지만 모달의 텍스트 상자에서 일부 변경을 수행하는 중 갑자기 데이터 테이블에 반영됩니다 (데이터 테이블은 다른 컨트롤러에 있음).

업데이트 버튼을 클릭 한 경우에만 데이터 테이블에 반영하고 싶습니다. 그리고 버튼을 클릭하면 버튼을 취소하고 이전 값이 있어야합니다. 사람이 어디 나를 알게하십시오, 그래서

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

:

여기

<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와 코드입니다 : 여기

<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 코드입니다 : 여기

내 HTML 코드입니다 잘못 가고있어 !!! 미리 감사드립니다.

Answer 1

이것은 AngularJS의 핵심 기능인 양방향 데이터 바인딩 때문에 발생합니다.

scope을 모달로 사용하여 $scope으로 설정 한 모달을 전달하면 효과적으로 모달이 데이터 테이블의 데이터와 직접 통신하도록하고 실시간으로 업데이트 할 수 있습니다.

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

이렇게하면 모달에있는 하나의 변경 사항이 데이터 테이블의 다른 항목에 반영되지 않도록 메모리에 두 개의 다른 인스턴스가 생성됩니다.

'업데이트'버튼을 클릭하면 updatedFilterlist에 대한 변경 사항을 Filterlist에 복사하는 코드를 추가 할 수 있습니다.