How to create list using checkbox in Ionic 3

Ionic Framework ionic-v3
1

I am using Ionic 3 and I want to use checkbox for the user to select which exam he/she is preparing. But I am unable to create this layout (UI). My exam list is coming from api.

Capture

First I want to create above UI and secondly when a user select any of the box the background color will change. How can I achieve this?

3

if that flag is inside your list then I suggest you to use a class attribute
HTML Code

<div *ngFor="let item of examlist" [class.active]="item.select" (click)="item.select=!item.select">
{{item.name}}
</div>

CSS class of active

.active{
   backgroud-color:gray; //any color you want
}
4

Hi, Thanks for reply.I have around 25-30 exam list.The above pic contains only 8 list.So is it possible using ion-segment button.?

5

Thanks hirenkorat3, But i want to pass the value of selected exam to the api.How to know which exam

is selected ? we can’t use [(ngModel)] to the div.
6

one way to do it:

 <div *ngFor="let item of examlist; let i = index" [class.active]="item.select"
       (click)="item.select=!item.select">
   {{item.name}}
 </div>
 <button (click)="saveSelected"/>

in your controller.ts file:

 function saveSelected(index:number):void{
       const result = examlist.filter(ex => ex.select == true); // res is the list of all selected exams 

         api.save(res)...
 }
2 Likes
7

Thanks mous12 its working but i am getting this error when i click button

ERROR TypeError: _co.onSubmit is not a function

8

add a snippet of your code!

9

ts code

public examlist = [
    { id: 1, name: "CPO",select:false },
    { id: 2, name: "CHSL",select:false },
    { id: 3, name: "MTS",select:false },
    { id: 4, name: "CGL" ,select:false},
    { id: 5, name: "HSSC",select:false },
    { id: 6, name: "UPSSC",select:false },
    { id: 7, name: "Railways",select:false },
    { id: 8, name: "CDS" ,select:false}
  ]
  saveSelected(index:number):void{
       const result = this.examlist.filter(ex => ex.select == true); 
       console.log(result)
       // console.log(result.name);
       for (var i = 0; i <result.length;i++){
         console.log(result[i].name)
           console.log(result[i].select)
       }
}

html code

<ion-grid>
    <ion-row>
      <ion-col col-4>
        <div  *ngFor="let item of examlist; let i = index" [class.active]="item.select"
        (click)="item.select=!item.select">
        {{item.name}}
      </div>
    </ion-col>
  </ion-row>
</ion-grid>
<button ion-button (click)="saveSelected()"></button>

And one more problem [class.active] is not working also. I want to change the background color from #1573FB to #00793a when select value gets true…

10

how are you calling saveselected function?

11

ohh sorry! please see my edited code.

12

remove the param of the function saveselected()

13

Please let me try to talk you out of that.

Especially on touchscreens, consistency of presentation is a really important design goal, and it’s being stomped on here. The sample image you presented already has a different number of options on each line, and the physical placement of the items does not lie anywhere near a consistent axis. If, as you say, there are actually 3x more items to go, this is only going to get exacerbated.

Also, these look like action buttons. Users are conditioned that touching an action button causes an action to happen.

Finally, you’re using a toolkit/framework in Ionic that contains lots of interface widgets specifically designed for familiarity and ease of use in touchscreen context. It contains a radio group component that dovetails perfectly with your goal of “get a single choice from the user of several options”. I would strongly suggest using it here.

14

Thanks for information but in my case user can select more than one options.So i am thinking of using checkbox but i am unable to do it.After mous12 help i have created this UI that does seems to be exacerbated.

Exam%20Selection%20Screen
Exam%20Selection%20Screen1200Ă—2508 154 KB

15

Thank you so much mous12.Its working now.You save my time. :+1:

16

I think that’s a great idea. ion-list-header would also seem to be a great fit for separating them into groups like you are trying to do.

1 Like