AngularJS ng-repeat 的问题 - 空白结果

Question

我像往常一样做一个简单的 ng-repeat，但这次失败了，我不知道发生了什么......

这是我的 HTML 部分：

<p ng-repeat="mow in check.BankDataParent.mows">
    <div class="checkbox">
        <input type="checkbox" ng-model="mow.selected" />
        <label for="checkbox"></label>
    </div>
    <i class="fa fa-exclamation-triangle" 
    style="color:red;"
    title="{{mow.errorInputAmountTitle}}"
    ng-show="mow.selected && mow.errorInputAmountTitle"></i>
    <input type="text" ng-model="mow.inputAmount" size="8" ng-show="mow.selected" />
    {{mow.displayField}}
    <a href="/{{mow.id}}" target="_blank"><i class="fa fa-external-link"></i></a>
</p>

这就是它的渲染方式（当我通过浏览器执行检查元素时）：

<!-- ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                            </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                            </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                            </p><!-- end ngRepeat: mow in check.BankDataParent.mows -->
    <div class="checkbox">
        <input type="checkbox" ng-model="mow.selected" class="ng-pristine ng-untouched ng-valid">
        <label for="checkbox"></label>
    </div>
    <i class="fa fa-exclamation-triangle ng-hide" style="color:red;" title="" ng-show="mow.selected &amp;&amp; mow.errorInputAmountTitle"></i>
    <input type="text" ng-model="mow.inputAmount" size="8" ng-show="mow.selected" class="ng-pristine ng-untouched ng-valid ng-hide">

    <a href="/" target="_blank"><i class="fa fa-external-link"></i></a>
<p></p>

PS：这就是在 check.BankDataParent.mows 中有 4 个元素时的解析方式......所有的

是空白，最后只有一个内容，但它也是空的（没有数据）...

你知道发生了什么吗？

更新 感兴趣的事情：我将代码更改为：

                    <p ng-repeat="mow in check.BankDataParent.mows">
                        <!-- <input type="checkbox" ng-model="mow.selected" /> -->
                        <div class="checkbox">
                            <input type="checkbox" ng-model="mow.selected" name="cbmow{{mow.id}}" />
                            <label for="cbmow{{mow.id}}"></label>
                        </div>

以上部分的其余部分保持不变...... 现在的输出是：

<!-- ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                        <!-- <input type="checkbox" ng-model="mow.selected" /> -->
                        </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                        <!-- <input type="checkbox" ng-model="mow.selected" /> -->
                        </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                        <!-- <input type="checkbox" ng-model="mow.selected" /> -->
                        </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<p ng-repeat="mow in check.BankDataParent.mows" class="ng-scope">
                        <!-- <input type="checkbox" ng-model="mow.selected" /> -->
                        </p>
<!-- end ngRepeat: mow in check.BankDataParent.mows -->
<div class="checkbox">
                            <input type="checkbox" ng-model="mow.selected" name="cbmow" class="ng-valid ng-dirty ng-valid-parse ng-touched">
                            <label for="cbmow"></label>
                        </div>
<i class="fa fa-exclamation-triangle ng-hide" style="color:red;" title="" ng-show="mow.selected &amp;&amp; mow.errorInputAmountTitle"></i>
<input type="text" ng-model="mow.inputAmount" size="8" ng-show="mow.selected" class="ng-pristine ng-untouched ng-valid ng-hide">
<a href="/" target="_blank"><i class="fa fa-external-link"></i></a>
<p></p>

现在我想知道这是否是与复选框图像的 CSS 冲突？

这是我的 CSS：

.checkbox {
  display: inline-block;
  width: 24px;
  height: 24px;
  position: relative;
  cursor: pointer;
  margin: 0px 10px -5px 0;
}
.checkbox input[type="checkbox"] {
  opacity: 0;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1070;
  cursor: pointer;
}
.checkbox label {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  border: 1px solid #eee;
  border-radius: 3px;
}
.checkbox input[type="checkbox"]:checked + label {
  background-image: url("../images/icons.png");
}

Answer 1

问题是因为在<p> 标签中使用了ng-repeat，该标签有一个<div> 标签作为子元素。请参考list of elements inside p tag,another similar issue。

当我将您的 p 标签更改为 div 时。它现在工作正常。 Fiddle Demo

    <div ng-repeat="mow in mows">
    </div>

在小提琴中尝试将p更改为div。演示将无法呈现。这里的问题是在p标签中使用div作为div默认情况下是块级元素。