3

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 &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: 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 &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>

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");
}
||||||
  • 1
    Looks like you must be accidentally closing the <p> tag before <div class="checkbox">, but I can't see anything wrong with what you have posted - are you sure it isn't written as <p ng-repeat="mow in check.BankDataParent.mows"/> ("/" at the end)? – Rhumborl Jan 25 '16 at 13:25
  • 1
    Try {{check.BankDataParent.mows}} before ng-repeat and check what is displayed. – Raghu Jan 25 '16 at 13:25
  • Thanks @Rhumborl for the fast reply, can you please check the update? I think it's a conflict with the CSS, is it possible? – Leo Ribeiro Jan 25 '16 at 14:50
  • Thanks @Raghu for the fast reply, can you please check the update? I think it's a conflict with the CSS, is it possible? – Leo Ribeiro Jan 25 '16 at 14:51
  • @LeoRibeiro Not an issue with css.I have updated an answer.Please check it. – Raghu Jan 25 '16 at 15:36
2

The issue is because of using ng-repeat in a <p> tag which has a <div> tag as a child element.Please refer to list of elements inside p tag,another similar issue.

When I changed your p tag to div. Its working fine now. Fiddle Demo

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

In the fiddle try changing the p to div.The demo will fail to render.The issue here is using div inside p tag as div by default is block level element.

||||||
  • Problem is not using ng-repeat on div, problem is using <div> inside <p>. <p ng-repeat="mow in mows"> you can do like this, no issues. – Pratap A.K Jan 25 '16 at 15:38
  • @PratapA.K Yup,I have mentioned it .Please check mt last para. – Raghu Jan 25 '16 at 16:07
  • I've changed to div and put an ID for the checkbox div and label... As it is recommended on this question thank you my friend! – Leo Ribeiro Jan 25 '16 at 17:55
  • I am unable to edit my comment, so this new comment.... we can do ng-repeat on <p> without any issues, but we shouldn't use <div> inside <p>. @Raghu : you still need to modify your first para, so that i shouldn't misguide others. Change the sentence "The issue is because of using ng-repeat in a <p> tag" to "The issue is because of using <div> inside a <p> tag" – Pratap A.K Jan 25 '16 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.