2014-09-05 2 views
1

Je passe des modaux bootstrap aux modems angulaires Ekathuwa. J'ai une table qui quand je clique sur le "Nombre" un modal s'ouvre avec les champs d'entrée peuplés avec les propriétés d'objets choisis. Je l'ai travaillé avec les modals bootstrap mais je suis perdu sur la façon de le faire de manière angulaire. plunkrComment passer d'un modal bootstrap à un modal angulaire

contrôleur :

//editChangeOrderModal 
$scope.currentItem = null; 
$scope.editChangeOrderModal = function (model) { 
    $ekathuwa.modal({ 
    id: 'editChangeOrderModal', 
    scope: $scope.currentItem = model, 
    templateURL: "modal-template.html" 
    }); 
}; 

Vue:

<table class=" table table-bordred table-striped table-hover"> 
    <tr> 
    <th style="font-weight: bold;">Number</th> 
    <th style="font-weight: bold;">Date</th> 
    <th style="font-weight: bold;">Name</th> 
    </tr> 
    <tr ng-repeat="job in ChangeOrders" class=" pointer"> 
    <td ng-click="editChangeOrderModal(job)">{{job.ChangeOrderNumber}}</td> 
    <td>{{job.ChangeOrderDate}}</td> 
    <td>{{job.ChangeOrderName}}</td> 
    </tr> 
</table> 

<div class="col-xs-12"> 
    <div class="inline-fields" style="margin-top:30px"> 
    <label>Name:</label> 
    <input style="width:150px" ng-model="currentItem.ChangeOrderName" type="text"> 
    </div> 
    <div class="inline-fields"> 
    <label>Number:</label> 
    <input style="width:150px" ng-model="currentItem.ChangeOrderNumber" type="text"> 
    </div> 
    <div class="inline-fields"> 
    <label>Date:</label> 
    <input style="width:150px" ng-model="currentItem.ChangeOrderDate" type="date"> 
    </div> 
    <br/> 
    <input style="float:right" 
     ng-click="printEditChangeOrderModal(currentItem)" 
     type="button" 
     value="Print" 
     go-click="#"/> 
    <input style="float:right" 
     ng-click="updateChangeOrder(currentItem)" 
     type="button" 
     value="Save" 
     go-click="#"/> 
    <input style="float:right" 
     type="button" 
     data-dismiss="modal" 
     value="Exit" 
     go-click="#"/> 
</div> 

Répondre

1

Je pense que le problème est avec cette ligne,

scope: $scope.currentItem = model, 

I changé à ce

$scope.currentItem = null; 
    $scope.editChangeOrderModal = function(model) { 
     $scope.currentItem = model; 
     console.log(model); 
     $ekathuwa.modal({ 
      id: "editChangeOrderModal", 
      scope:$scope, 
      templateURL: "modal-template.html" 
     }); 
    } 

Je bifurqué votre [plunker]: http://plnkr.co/edit/OTJA6n7WADN5bprZaQco?p=info

+0

Merci beaucoup !!! – texas697