Passing value to bootstrap modal popup in angular app

Question

I have created some tags with the help of span & ng-repeat. when user clicks on remove button on any of the tag, I open a modal pop-up. This modal-pop has a delete button. This delete button in turn calls one function.

I want to pass some information to this delete function but I am not sure how to pass id of remove button to modal-pop up that comes up.

Here is the fiddle for same.

<div ng-app>
    <div ng-controller="TodoCtrl">
        <div ng-app="" ng-init="names=['One','Two','Three']">
            <ul>
                <li ng-repeat="x in names"> <span class="tag label label-info">
  <span>{{x}}</span>
 <a data-toggle="modal" data-target="#confirm-delete"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a> 
                    </span>
                </li>
            </ul>
        </div>
        <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                         <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>

                    </div>
                    <div class="modal-body">
                        <p>You are about to delete one track, this procedure is irreversible.</p>
                        <p>Do you want to proceed?</p>
                        <p class="debug-url"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a ng-click="deleteMe()" class="btn btn-danger btn-ok" data-dismiss="modal">Delete</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@entre: Each buttuon will have diferent value. I am not sure how passing `x` to delete button will help in this case. — SharpCoder, Jul 13 '15 at 10:19
Please check it http://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal — RIYAJ KHAN, Jul 13 '15 at 10:20
each button is inside an ng-repeat.. so x is available for you inside ng-repeat scope (which covers button as well) — harishr, Jul 13 '15 at 10:21
then you should have it inside ng-repeat.. without that its not possible. the other solution is to use `angular-ui's modal` directive — harishr, Jul 13 '15 at 10:31
actually you are mixing angular with jQuery bootstrap.You should use angular bootstrap — RIYAJ KHAN, Jul 13 '15 at 11:21

Manish Kr. Shukla · Answer 1 · 2015-07-15T03:10:44.703

3

Adding a ng-click will solve your problem. But the approach will be a little be tweaked here.

Add a ng-click to the a tag.

  <a data-toggle="modal" ng-click="setID(x)" data-target="#confirm-delete">
      <i class="remove glyphicon glyphicon-remove-sign glyphicon-white">
      </i>
   </a>

And then add a temp variable to hold the value to be removed (in your case x)

  $scope.setID = function(x) {
      $scope.valueToBeRemoved = x;
  };

And you can now access that variable in the delete method.

Updated plunker here

edited Jul 15 '15 at 03:10

answered Jul 13 '15 at 11:03

Manish Kr. Shukla

4,447
1
20
35

Thats exactly what I was thinking but I was hoping for a better solution. Thanks for your reply – SharpCoder Jul 13 '15 at 11:05
Glad it helped. (y). Don't mind accepting it if that is what you were looking for – Manish Kr. Shukla Jul 13 '15 at 11:05
1

I have upvoted & will mark it as answer if I dont get a better solution. Thanks again for suggestion :) – SharpCoder Jul 13 '15 at 11:11

Passing value to bootstrap modal popup in angular app

1 Answers1