将表达式传递到angular js中的模态视图

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">&times;  </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>

我正在创建一个服务的产品列表。当用户点击特定行中的删除按钮时，我想将相应的产品名称作为参数传递给函数。创建了一个模式视图，以确保使用引导程序进行删除。ng-click方法只选择列表中的第一个产品名称，无论选择哪一行。请帮忙解决这个问题。

Answer 1

不应该使用Bootstrap javascript，而应该使用类似ui Bootstrap模式的指令。查看此

您在图像中添加一个ng单击，然后将该项目传递给模态。通过打开模态的回调，您可以决定是否删除项目。

Answer 2

试试这个：

<td><img src="img/trash.png" alt="Delete" data-toggle="modal"   data-target="#myModal" ng-click="productToDelete = product"></td>

你的按钮：

<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="closebtn(productToDelete.productName)">Delete</button>

在下面的解决方案中，您定义了productToDelete变量，该变量在单击img后取值，此外，您还可以使用该变量

Answer 3

当点击事件被触发时，循环中使用的变量乘积引用同一个对象，因为它覆盖了每个循环并指向最后一个对象。

试试这个方法：

 ng-click="closebtn(products[$index].productName)

Answer 4

首先，使用ui引导程序插件，而不是引导程序的JavaScript。它有$uibModal服务来管理AngularJS风格的模式窗口。你的代码应该是这样的：

主视图

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

点击控制器中的处理程序

$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
    })
};

不要忘记注入$uibModal。resolve属性允许您将product传递给名为your-modal-controller的控制器。然后你可以得到产品的任何性质。例如，它的名称
如果你只需要传递产品名称，你可以使用这个resolve块：

resolve {
   productName: product.productName
}