CODEWITHSUNDEEP
angularionic2
chrispytoes
chrispytoes

Reputation: 1889

ion-checkbox inside ion-grid makes grid blank

I have the following HTML:

<ion-item-sliding *ngFor="let item of playlist.data | filterBy: filter; let i = index;">
  <ion-item class="playlist-modal-item">
    <ion-grid>
      <ion-row>
        <ion-col col-4>
          <h2>{{ item.name }}</h2>
          <p>{{ item.artist }}</p>
        </ion-col>
        <ion-col col-4>
        </ion-col>
        <ion-col col-4>
          <ion-checkbox [(ngModel)]="playlist.data[i].selected"></ion-checkbox>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>
  <ion-item-options side="right">
    <button ion-button>Play Next</button>
  </ion-item-options>
  <ion-item-options side="left">
    <button ion-button>Play Last</button>
  </ion-item-options>
</ion-item-sliding>

My problem is with the <ion-checkbox [(ngModel)]="playlist.data[i].selected"></ion-checkbox> line. If I remove this line it works as expected without the checkboxes. When I add the checkbox line the list items get repeated for each item in the array but the content of each item comes out blank.

I also tried doing it like this: <ion-checkbox [(ngModel)]="item.selected"></ion-checkbox> which also does the same thing.

No errors are showing in the console and I know the properties are all correct and populated. The item.selected property is defaulted to false already too.

Edit: To clarify, when I have the checkbox there the list items get repeated but the content of each item is completely empty, but only when the checkbox line is there.

The JSON looks something like this:

playlist = {
    data: [
        {
            name: 'foo',
            artist: 'bar',
            selected: false
        },
        ...
    ]
}

Edit: The filterBy is not the issue, it does the same thing when I remove it.

Upvotes: 6

Views: 2379

Answers (4)

alex351
alex351

Reputation: 1966

I just had to wrap my text in ion-label tags and my text magically appeared. :)

Example:

<ion-label><h2>Some text</h2></ion-label>

Upvotes: 0

AVJT82
AVJT82

Reputation: 73357

As per said here in the ionicframework forum

Unexpected things inside <ion-item> need to be properly tagged. Add an item-content attribute to each of your <ion-grid> elements

So there is really a simple solution to this problem, just add item-content to your ion-grid tag like suggested above:

<ion-grid item-content>

And then it works like a charm! Demo: http://plnkr.co/edit/gw7h5mW3OJbPxw6xC3vb?p=preview

Upvotes: 11

chrispytoes
chrispytoes

Reputation: 1889

Okay, so what I've found out is that when I move the checkbox outside the ion-grid the checkbox shows but nothing else. It seems like the issue lies with the ionic checkbox directive.

If I use a plain html checkbox it works fine, so I'm just going to do that and style it myself.

Upvotes: 0

Aravind
Aravind

Reputation: 41543

Use the iterator 

<ion-checkbox [(ngModel)]="item.selected"></ion-checkbox>

Update: There might be a typesafe error, use ? in the bindings

<h2>{{ item?.name }}</h2>
<p>{{ item?.artist }}</p>

Upvotes: 0

Related Questions