Example of ng-repeat that works

Ionic Framework ionic-v3
1

Trying to generate checkboxes from a list. Can’t even get something simple like this to work:

<ion-checkbox ng-repeat="i in testlist" ></ion-checkbox>

A working example would be great.

2

You should consider reading up on angular2+ syntax. ngFor is what you might be looking for.

3

Thanks for your answer. As far as I can tell ngFor is not an attribute for <ion-checkbox>. I use Ionic 3

4

It doesn’t matter if you are using Ionic2/3/4

ngIf is a core directive of angular - so you won’t see it explicitly called out in ionic docs. It can be applied to any template

You typically won’t loop <ion-checkbox> directly. You’d loop the <ion-item> around it like this:

  <ion-item *ngFor="let name of names">
    <ion-label>{{name.Name}} with value: {{name:Value}} </ion-label>
    <ion-checkbox [(ngModel)]="name.Value" ></ion-checkbox>
  </ion-item>

where

  names = [{ Name:'item-1', Value:false},
           { Name:'item-2', Value:false}];

If you checked the boxes, you’ll see values change

also, if you tried to implement what you wrote was not possible (looping ion-checkbox directly) you’d see it works, but not as you intended.

If you haven’t, I strongly recommend you read https://angular.io/docs for the basics (these concepts are independent of ionic , which is really mostly a visual layer on top of angular)

2 Likes
5

Thanks for your answer.

I tested your code but it does not work. The iteration does not run. I tried with just:

 <ion-item *ngFor="let name of names">
    <ion-label>bubba</ion-label>
  </ion-item>

and it outputs nothing.

6

Can you show the code that fills the names (or testlist) variable?

7

It finally works. Something was hung up. After a restart with ionic serve it works. Thanks again for the help.