CODEWITHSUNDEEP
angularjstwitter-bootstrap
texas697
texas697

Reputation: 6417

How to switch from a bootstrap modal to a angular modal

I am switching from the bootstrap modals to Ekathuwa Angular Modals. I have a table that when I click on the "Number" a modal opens with the input fields populated with the selected objects properties. I have it working with the bootstrap modals but i am lost on how to do it the angular way. plunkr

controller :

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

view :

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

Upvotes: 1

Views: 253

Answers (1)

Ganesh Nemade
Ganesh Nemade

Reputation: 1599

I think the problem is with this line, 

scope: $scope.currentItem = model,

I changed to this

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

I forked your [plunker]: http://plnkr.co/edit/OTJA6n7WADN5bprZaQco?p=info

Upvotes: 1

Related Questions