3

Confirm modal example

I changed the example to a simple one. I want to call a delete function when I click on "Remove this {{item.id}}" button. The title successfully get the item.id value.

<h4 class="modal-title" id="exampleModalLabel">Do you want to remove  {{item.id}}</h4>

But the button doesn't get the item.id value and the function doesn't work. And instead of "Remove this item.id" it's only "Remove this ", and the function doesn't get the parameter too.

<button type="button" id="exampleModalLabel" class="btn btn-primary" ng-click="removeItem(item.id)">Remove this {{item.id}}</button>

What I have is this:

<tr ng-repeat="item in items">
    <td>{{item.id}}</td>
    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="{{item.id}}">Remove this item?</button></td>
</tr>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Do you want to remove  {{item.id}}</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" ng-click="removeItem(item)">Remove this {{item.id}}</button>
      </div>
    </div>
  </div>
</div>

//And this javascript
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);
});

I hope the info is enough. If you need some more info, please tell me.

Vasil Emilov
  • 47
  • 8

2 Answers2

2

Your modal is out of items scope. You need to assign your item to some temp variable inside controller. You should use ng-click to achieve that, something like this ng-click="tempItem = item". You probably also have to edit your removeItem function.

<tr ng-repeat="item in items">
    <td>{{item.id}}</td>
    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="{{item.id}}" ng-click="tempItem = item">Remove this item?</button></td>
</tr>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Do you want to remove  {{tempItem.id}}</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="exampleModalLabel" class="btn btn-primary" ng-click="removeItem(tempItem)">Remove this {{tempItem.id}}</button>
      </div>
    </div>
  </div>
</div>

//And this javascript
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);
});
Gvidas
  • 1,964
  • 2
  • 14
  • 21
  • Even though modal is out of items it still manages to get the item.id in `` Why it doesn't get it in `` – Vasil Emilov Jan 12 '16 at 13:46
  • 1
    I don't think that it manages to get `item.id` in `h4`, you're just changing `h4` content with jquery `modal.find('.modal-title').text('New message to ' + recipient);` – Gvidas Jan 12 '16 at 13:57
  • actually yes, my bad! – Vasil Emilov Jan 12 '16 at 14:36
2

Try using this:

<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" id="removeButton" class="btn btn-primary">Remove this <span id="itemid"></span></button>
</div>

//JS
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var modal = $(this);
modal.find('.modal-title').text('New message to ' + recipient);
modal.find('.modal-body input').val(recipient);

modal.find('#itemid').html(recipient); // add this
modal.find('#removeButton').attr('ng-click', 'removeItem('+recipient+')'); // add this
});
Paul Moldovan
  • 464
  • 2
  • 5
  • 17
  • All seems fine, but the function doesn't want to trigger... And I don't know why... I am trying to debug it, to see what goes wrong, but it seems like the function just doesn't trigger.... – Vasil Emilov Jan 12 '16 at 14:39
  • The one for the works fine... It even add the "ng-click="removeItem(myItem)" too, but when I click, the function doesn't trigger... – Vasil Emilov Jan 12 '16 at 14:44
  • Sorry to hear that. Unfortunately I don't know AngularJs and I can't help you there. Here is a link that might help: http://stackoverflow.com/questions/27897175/ng-change-ng-click-dont-work-with-data-toggle-buttons-since-v1-3-0 – Paul Moldovan Jan 12 '16 at 22:18