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中不起作用

回答

相关问题