I'm doing a simple ng-repeat as always but this time it's failing and I can't figure out what's happening...
This is my HTML section:
<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>
And this is how it's rendering (when I'm doing an inspect element via browser):
<!-- 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: this is how is being parsed when it has 4 elements in check.BankDataParent.mows... All of the
are blanks and only one content at the end, but its empty too (no data)...
Do you know what is happening?
UPDATE Interest thing: I've changed a little my code to:
<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>
The rest of the above part remains the same... And the output now is:
<!-- 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>
And now I'm wondering about if it's a CSS conflict with the checkbox image?
Here's my 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");
}
` tag before `