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

【问题标题】：pass expressions to modal view in angular js将表达式传递给角度js中的模态视图
【发布时间】：2016-07-25 12:16:29
【问题描述】：

</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 方法只选择列表中选择的行中的第一个产品名称。请帮助解决此问题。

【问题讨论】：

这不是有效的 HTML 或 minimal reproducible example!

标签： html angularjs parameter-passing bootstrap-modal

【解决方案1】：

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

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

【讨论】：

【解决方案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 点击后取值，您可以进一步使用此变量

【讨论】：

【解决方案3】：

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

试试这个方法：

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

【讨论】：

【解决方案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
}

【讨论】：