Question

我正在尝试使用ng-repeat更改模态标题和模态正文文本，但模态标题和数据始终指向第一个数组，即使数据在锚标记中遍历

<table>
  <tr ng-repeat="x in records">
  <td> <a ng-href="" data-toggle="modal" data-target="#myModal">{{x}}</a>
  <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">{{x}}</h4>
  </div>
  <div class="modal-body">
  <p>{{x}}</p>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-
  dismiss="modal">Close</button>
  </div>
  </div>

  </div>
  </div>
  </td>
  </tr>
  </table>

x的值

<td> <a ng-href="" data-toggle="modal" data-target="#myModal">{{x}}</a>

锚标签中的

是根据数组显示除了值之外的所有元素以下代码中的x

<h4 class="modal-title">{{x}}</h4>

并且在模态体中始终指向数组的第一个元素

<p>{{x}}</p>

X的值应该在数组

的任何地方改变

Answer 1

问题在于模态id属性，对于所有模态都有相同的id，因此当您尝试打开模态时，它将始终打开相同的（第一个）。

使用$index属性中的id变量使其唯一：

<a ng-href="" data-toggle="modal" data-target="#myModal-{{$index}}">{{x}}</a>
<div class="modal fade" id="myModal-{{$index}}" role="dialog">

使用boostrap模态

1 个答案: