Angular的ngRepeat在$ modal中不起作用

你好，我想在$ modal中使用Angular的ngRepeat（它在ui-bootstrap-tpls-0.11.0.js中定義）。爲了實現$模態，我使用了與此處所提供的完全相同的方法：http://angular-ui.github.io/bootstrap/
我有一個控制器 - > PageController用於我的頁面（彈出窗口將被調用）和一個用於彈出窗口的控制器 - > ModalInstanceCtrl。在PageController中，我定義了一個對象列表，並通過$ modal.open（）函數的resolve屬性將此列表傳遞給ModalInstanceCtrl。在調試中，我可以看到，在我的ModalInstanceCtrl $範圍內，我有所需的列表。
在$ modal的html代碼中，我想對該列表進行迭代，並添加適當數量的表格行以及所需的信息:)。當我在標籤上使用ng-repeat時，我看不到任何表格行。如果我使用myList [0] .myProperty刪除了ng-repeat並將其更改爲多行，則會評估此表達式，並且我的$ modal以可見的方式顯示。可悲的是我不知道myList的長度，所以我需要使用ng-repeat之類的東西。

這是工作：

<div class="modal-body lang_label_popUp"> 
    <table> 
     <tr>{{translationTablePlaceHolders[0].name}} &nbsp; <input class="input-medium input_popUp" type="text"></input></tr> 
     <tr>{{translationTablePlaceHolders[1].name}} &nbsp; <input class="input-medium input_popUp" type="text"></input></tr> 
     <tr>{{translationTablePlaceHolders[2].name}} &nbsp; <input class="input-medium input_popUp" type="text"></input></tr> 
     <tr>{{translationTablePlaceHolders[3].name}} &nbsp; <input class="input-medium input_popUp" type="text"></input></tr> 
    </table> 
</div>

雖然這是行不通的：

<div class="modal-body lang_label_popUp"> 
    <table> 
     <tr ng-repeat="placeHolder in translationTablePlaceHolders">{{placeHolder.name}} &nbsp; <input class="input-medium input_popUp" type="text"></input></tr> 
    </table> 
</div>

所以是NG-重複可以從我的彈出HTLM代碼中呢？

我正在使用Angular v1.2.16和ui-bootstrap-tpls-0.11.0。

在此先感謝！

來源

2014-05-10 Milen Igrachev

這不是$ modal相關的，而是一個HTML/ngRepeat問題。

使用td標籤：

<table> 
    <tr ng-repeat="placeHolder in translationTablePlaceHolders"> 
    <td>{{placeHolder.name}} &nbsp; 
     <input class="input-medium input_popUp" type="text" /> 
    </td> 
    </tr> 
</table>

請看下面的例子不使用td與ng-repeat：

<body> 
    <table> 
    <tr ng-repeat="number in [ 1, 2, 3]"> 
     {{ number }} 
    </tr> 
    </table> 
</body>

這將產生空標籤，就像在你的榜樣：

<body class="ng-binding"> 
    <table> 
    <tbody> 
     <!-- ngRepeat: number in [ 1, 2, 3] --> 
     <tr ng-repeat="number in [ 1, 2, 3]" class="ng-scope"></tr> 
     <!-- end ngRepeat: number in [ 1, 2, 3] --> 
     <tr ng-repeat="number in [ 1, 2, 3]" class="ng-scope"></tr> 
     <!-- end ngRepeat: number in [ 1, 2, 3] --> 
     <tr ng-repeat="number in [ 1, 2, 3]" class="ng-scope"></tr> 
     <!-- end ngRepeat: number in [ 1, 2, 3] --> 
    </tbody> 
    </table> 
</body>

然後考慮下列情況不使用ng-repeat翼例如：

<body> 
    <table> 
    <tr>1</tr> 
    <tr>2</tr> 
    <tr>3</tr> 
    </table> 
</body>

雖然這實際上顯示123，標記看起來像這樣（在Chrome至少）：

<body> 
    123 
    <table> 
    <tbody> 
     <tr></tr> 
     <tr></tr> 
     <tr></tr> 
    </tbody> 
    </table> 
</body>

來源

2014-05-10 08:38:58 tasseKATT

大感謝了詳細的解答，併爲我可憐的遺憾HTML知識。 –

不客氣，當然不是你需要道歉的東西:) – tasseKATT

Angular的ngRepeat在$ modal中不起作用

回答

相關問題