Question

您好我想在$ modal中使用Angular的ngRepeat（在ui-bootstrap-tpls-0.11.0.js中定义）。要实现$ modal，我使用与此处所示完全相同的方法：http://angular-ui.github.io/bootstrap/
我有一个控制器 - ＆gt;我的页面的PageController（弹出窗口将从中调用）和弹出窗口的控制器 - ＆gt; ModalInstanceCtrl。在PageController中，我定义了一个对象列表，并通过$ modal.open（）函数的resolve属性将此列表传递给ModalInstanceCtrl。在调试中，我可以看到在我的ModalInstanceCtrl $范围内，我有所需的列表。
在$ modal的html代码中，我想在该列表上进行迭代，并使用我想要的信息添加适当数量的表行:)。当我在标签上使用ng-repeat时，我看不到任何表格行。如果我删除ng-repeat并使用myList [0] .myProperty将其更改为多行，则会计算此表达式并以可接受的方式显示我的$ 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>

在我的弹出式HTLM代码中可以使用ng-repeat吗？

我使用的是Angular v1.2.16和ui-bootstrap-tpls-0.11.0。

提前致谢！

Answer 1

这不是与$ 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>

Angular ng Repeat在$ modal中不起作用

1 个答案: