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>

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

Answer 1

当触发click事件时，循环中使用的变量product会引用同一个对象，因为它是每个循环的覆盖并指向最后一个对象。

尝试这种方式：

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

Answer 2

您应该使用类似ui-bootstrap模式的指令，而不是使用Bootstrap javascript。见this

您可以向图像添加ng-click并将项目传递给模态。通过打开模态的回调，您可以决定是否删除项目。

Answer 3

试试这个：

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

首先，使用ui-bootstrap plugin而不是bootstrap的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
}

将表达式传递给角度js中的模态视图

4 个答案: