通表達式來模態的視圖中的角的js

Question

</tr> 
 
\t <tr ng-repeat="product in products"> 
 
\t \t <td>{{$index + 1}}</td> 
 
\t \t <td><a ng-href="">{{product.productName}}</a> </td> 
 
\t \t <td>{{product.shortDescription}}</td> 
 
\t \t <td>{{product.url}}</td> 
 
\t \t <td>{{product.likes}}</td> 
 
\t \t <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

當觸發click事件時，循環內使用的變量product引用同一對象，因爲它覆蓋每個循環並指向最後一個對象。

試試這個方法：

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

Answer 2

而不是使用引導的javascript，你應該使用一個指令像UI的引導的模式。請參見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 
}