ng-repeat在引導模式下不起作用

我正在使用ng-repeat在不同的引導程序modal中顯示不同的內容（即數組中的項目），但在此example中發生了一些奇怪的事情。ng-repeat在引導模式下不起作用

我包括在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，hello有內容hello），但正如您在示例中看到的，所有三個按鈕都具有相同的關聯模態內容。

任何意見或建議，表示讚賞。

來源

2015-11-24 leonsPAPA

您的數據，目標是所有三個都一樣，因爲你使用id = example。看到我的解答 –

你的目標相同的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

來源

2015-11-24 21:41:01

非常感謝，@ Ziv Weissman – leonsPAPA

您可以通過幾種方法來做到這一點。可以通過ng-click添加選擇功能 - 然後設置新的模型。設置這個新模型可以讓你從你的ng-repeat中刪除模態模板，保持你生成的標記纖細和易於管理（這可能會帶來很多項目的巨大優勢！ - 無需重複此操作，請重複此操作三到三百次）觀察下面的例子...

<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 - 更新演示

來源

2015-11-24 21:40:09 scniro

非常感謝您的回答和問題更新@ scniro – leonsPAPA

如果你添加動態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>

來源

2015-11-24 21:42:57

非常感謝！@Lisa Gagarina – leonsPAPA

ng-repeat在引導模式下不起作用

回答

相關問題