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");
}
Leo Ribeiro
  • 228
  • 1
  • 16
  • 1
    Looks like you must be accidentally closing the `

    ` tag before `

    `, but I can't see anything wrong with what you have posted - are you sure it isn't written as `

    ` ("/" 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

1 Answers1

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.

Community
  • 1
  • 1
Raghu
  • 909
  • 7
  • 23
  • Problem is not using ng-repeat on div, problem is using
    inside

    .

    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](http://stackoverflow.com/questions/22473087/can-we-set-checkbox-image-for-type-checkbox-with-ng-repeat-using-angularjs) 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

    without any issues, but we shouldn't use

    inside

    . @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

    tag" to "The issue is because of using

    inside a

    tag"

    – Pratap A.K Jan 25 '16 at 18:49