【发布时间】：2018-06-18 10:13:06
【问题描述】：
当我单击表格行弹出模式中的详细信息时，仅适用于第一项。当我单击第二行详细信息时，第一个值是打开的。
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>S.No</th>
<th>Product Name</th>
<th>BF/AF</th>
<th>M</th>
<th>A</th>
<th>E</th>
<th>N</th>
<th ng-model="TotalQuantity" class="ng-pristine ng-untouched ng-valid ng-empty">Total Quantity</th>
<th ng-model="Price" class="ng-pristine ng-untouched ng-valid ng-empty">Price</th>
<th ng-model="interaction" class="ng-pristine ng-untouched ng-valid ng-empty">Interaction</th>
</tr>
</thead>
<tbody>
<!-- ngRepeat: product in products --><tr ng-repeat="product in products" class="ng-scope">
<td class="ng-binding">1</td>
<td class="ng-binding">1 AL</td>
<td class="ng-binding">AF</td>
<td class="ng-binding">1</td>
<td class="ng-binding">0</td>
<td class="ng-binding">0</td>
<td class="ng-binding">1</td>
<td class="ng-binding">
1
</td>
<td class="ng-binding">24</td>
<td><a data-toggle="modal" data-target="#myModal" data="1 AL" ng-click="getProductName(product.ProductID)">Details</a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title ng-pristine ng-untouched ng-valid ng-binding ng-empty" ng-model="WProductName"> Suppository related warnings</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="firstone">
<div class="alcohol">
<img src="/img/Interaction/alcohol.png" title="Alcohol">
<span class="ng-binding">CAUTION</span>
</div>
<div class="alcohol">
<img src="/img/Interaction/pregnancy.png" title="Pregnancy">
<span ng-model="Pregnancy" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty">PROBABLY SAFE</span>
</div>
<div class="alcohol">
<img src="/img/Interaction/lactation.png" title="Lactation">
<span ng-model="Lactation" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty">SAFE</span>
</div>
<div class="alcohol">
<img src="/img/Interaction/driving.png" title="Driving">
<span ng-model="Driving" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty">SAFE</span>
</div>
<div class="alcohol">
<img src="/img/Interaction/kidney.png" title="Kidney">
<span ng-model="Kidney" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty">CAUTION</span>
</div>
<div class="alcohol">
<img src="/img/Interaction/liver.png" title="liver">
<span ng-model="Liver" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty">SAFE</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
<!-- Modal -->
</tr><!-- end ngRepeat: product in products --><tr ng-repeat="product in products" class="ng-scope">
<td class="ng-binding">2</td>
<td class="ng-binding">Practin</td>
<td class="ng-binding">AF</td>
<td class="ng-binding">1</td>
<td class="ng-binding">0</td>
<td class="ng-binding">1</td>
<td class="ng-binding">1</td>
<td class="ng-binding">
1
</td>
<td class="ng-binding">26</td>
<td><a data-toggle="modal" data-target="#myModal" data="Practin" ng-click="getProductName(product.ProductID)">Details</a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title ng-pristine ng-untouched ng-valid ng-binding ng-empty" ng-model="WProductName"> Suppository related warnings</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="firstone">
<div class="alcohol">
<img src="/img/Interaction/alcohol.png" title="Alcohol">
<span class="ng-binding">CAUTION</span>
</div>
<div class="alcohol">
<img src="/img/Interaction/pregnancy.png" title="Pregnancy">
<span ng-model="Pregnancy" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty">PROBABLY SAFE</span>
</div>
<div class="alcohol">
<img src="/img/Interaction/lactation.png" title="Lactation">
<span ng-model="Lactation" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty">SAFE</span>
</div>
<div class="alcohol">
<img src="/img/Interaction/driving.png" title="Driving">
<span ng-model="Driving" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty">SAFE</span>
</div>
<div class="alcohol">
<img src="/img/Interaction/kidney.png" title="Kidney">
<span ng-model="Kidney" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty">SAFE</span>
</div>
<div class="alcohol">
<img src="/img/Interaction/liver.png" title="liver">
<span ng-model="Liver" class="ng-pristine ng-untouched ng-valid ng-binding ng-empty">SAFE</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
<!-- Modal -->
</tr><!-- end ngRepeat: product in products -->
</tbody>
<tfoot>
<tr>
<th colspan="8" style="font-size: 1.5em;">Total</th>
<th id="right" colspan="3" style="font-size: 1.5em;"><span ng-bind="total" style="margin-left: -1em;" class="ng-binding"></span><span class="ng-binding"> ₹ 50</span></th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
演示链接：Demo Link
【问题讨论】：
-
只需更改模态 ID，例如：#myModal、#myModal2
-
我正在使用重复功能我只有一个模型ID @Vishnuprasad
-
@Vishnuprasad jsfiddle.net/ivinraj/m1q7xsoh/1
标签： javascript jquery html css angularjs