Passing value for loading modal popup in angular application
I have created multiple tags using span and ng-repeat. when the user clicks the delete button on any of the tags, I open a modal popup. This modal pop has a delete button. This delete button in turn invokes one function.
I want to pass some information to this delete function, but I'm not sure how to pass the id of the delete button to the modal popup that appears.
Below is the fiddle .
<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">×</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>
+3
source to share
1 answer
Adding ng-click will solve your problem. But this approach will be slightly modified here.
Add ng-click to the tag a
.
<a data-toggle="modal" ng-click="setID(x)" data-target="#confirm-delete">
<i class="remove glyphicon glyphicon-remove-sign glyphicon-white">
</i>
</a>
Then add a temporary variable to hold the value to be removed (in your case x)
$scope.setID = function(x) {
$scope.valueToBeRemoved = x;
};
And now you can access this variable in the delete method.
Updated plunker here
+3
source to share