ng-repeat在bootstrap模式中不起作用

Question

我ng-repeat用来在不同的bootstrap中显示不同的内容(即数组中的项)modal,但是在这个例子中发生了一些奇怪的事情.

我在这里包含'模态' ng-repeat:

<div ng-repeat="item in items">

  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#example">
    {{item}}
  </button>

  <div class="modal" id="example">
    <div class="modal-content">
      {{item}}
    </div>
  </div>

</div>

因此预期的结果应该是具有三个不同内容的三个按钮(例如<button>'hi'应该具有内容hi,hello具有内容hello),但是如在示例中看到的,所有三个按钮具有相同的关联模态内容.

任何建议或意见表示赞赏.

Answer 1

您的目标是相同的ID.

改为:

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#example{{$index}}">
  {{item}}
</button>

<div class="modal" id="example{{$index}}">
    <div class="modal-content">
      {{item}}
    </div>
</div>

更新了plucker