Question

我正在使用ng-repeat在不同的引导程序modal中显示不同的内容（即数组中的项目），但是在example中发生了一些奇怪的事情。

我在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>

Updated plucker

Answer 2

你可以通过几种方式做到这一点。可以通过ng-click添加选择功能 - 然后设置新模型。通过设置这个新模型，您可以从ng-repeat中删除模态模板，保持生成的标记纤薄且易于管理（这可能会导致很多项目变得非常大！ - 无需重复此<div>无论如何三三百次）观察以下例子......

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

    <button type="button" 
        class="btn btn-info" 
        data-toggle="modal" 
        data-target="#example" 
        ng-click="select(item)">{{ item }}</button>
</div>

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

myApp.controller('Ctrl', function($scope) {

    $scope.items = ['hi', 'hey', 'hello'];

    $scope.select = function(selected) {
        $scope.selected = selected
    }
});

Plunker Link - 更新了演示

Answer 3

如果您向模态添加动态ID，则可以使用它，例如：

  <div ng-repeat="item in items">
    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{item}}">
      {{item}}
    </button>

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

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

3 个答案: