pass expressions to modal view in angular js - html

Question

</tr>
<tr ng-repeat="product in products">
<td>{{$index + 1}}</td>
<td><a ng-href="">{{product.productName}}</a> </td>
<td>{{product.shortDescription}}</td>
<td>{{product.url}}</td>
<td>{{product.likes}}</td>
<td><img src="img/trash.png" alt="Delete" data-toggle="modal" data-target="#myModal">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Delete Pitch</h4>
</div>
<div class="modal-body">
<p>Do you really want to delete the pitch?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="closebtn(product.productName)">Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button></td>
</div>
</div>
</div>
</div>
</tr>
Am creating a list of products from a service. Wen the user clicks on delete button in a particular row, i want to pass the corresponding product name as a parameter to the function. Have created a modal view to ensure the delete using bootstrap. The ng-click method picks only the first productname in the list whichever row am selecting. Please help to fix this.

Answer 1

Instead of using the Bootstrap javascript, you should use a directive like the modal of ui-bootstrap. See this
You add an ng-click to your image and pass the item to the modal. With the callback of the opened modal you can decide to delete your item or not.

Answer 2

try this:
<td><img src="img/trash.png" alt="Delete" data-toggle="modal" data-target="#myModal" ng-click="productToDelete = product"></td>
your button:
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="closebtn(productToDelete.productName)">Delete</button>
in the solution below you define productToDelete variable, that take value after clicking by img, further you can work with this variable

Answer 3

When the click event is fired the variable product used within the loop references to the same object because it's overwrittern each cycle and point to the last object.
try this way:
ng-click="closebtn(products[$index].productName)

Answer 4

First of all, use ui-bootstrap plugin instead of bootstrap's JavaScript. It has $uibModal service to manage modal windows with AngularJS style. Your code should be look like this:
Main view
<tr ng-repeat="product in products">
<td>{{$index + 1}}</td>
<td><a ng-href="">{{product.productName}}</a> </td>
<td>{{product.shortDescription}}</td>
<td>{{product.url}}</td>
<td>{{product.likes}}</td>
<td><img src="img/trash.png" alt="Delete" ng-click="delete(product)"></img></td>
</tr>
Click-handler in your controller
$scope.delete = function(product) {
$uibModal.open({
controller: 'your-modal-controller',
templateUrl: 'path-to-modal-template',
resolve: {
productToDelete: product
}
}).result.then(function(success){
// delete product from list
})
};
Don't forget to inject $uibModal. resolve property allows you to pass your product to controller named your-modal-controller. Then you can get any property of product. For example, it's name.
If you need only pass the product name, you can use this resolve block:
resolve {
productName: product.productName
}