我一如既往地做一个简单的重复,但这次它失败了,我无法弄清楚发生了什么......
这是我的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 && 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个元素时的解析方式......所有的
都是空白,最后只有一个内容,但它也是空的(没有数据)......
你知道发生了什么吗?
UPDATE 有趣的事情:我已将我的代码改为:
<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 && 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");
}
答案 0 :(得分:2)
问题是因为在<p>
标记中使用了ng-repeat,其中<div>
标记为子元素。请参阅list of elements inside p
tag,another similar issue。< / p>
当我将p
代码更改为div
时。它的工作正常。
Fiddle Demo
<div ng-repeat="mow in mows">
</div>
在小提琴中尝试将p
更改为div
。演示将无法呈现。此处的问题是div
标记内p
为div
默认情况下是块级元素。