javascript - 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>

在 fiddle 中尝试更改 p至 div .演示将无法呈现。这里的问题是使用div里面p标记为 div默认是 block 级元素。