jeudi 28 février 2019

Get Values through Multiple checkbox using filter

I have a list of students and their courses opted.NOw i need to create a checkbox of those subjects and after clicking a particular subject the list of students who have opted that particular subjects should be displayed.Need to do this just by using FILTER no formControl or any other method. IN HTMl

<div class="container">
<div class="row">
<div class="col-4" (change)="(show(crse))">
   <input type="checkbox" [(ngModel)]="and">
  <label>Android</label><br>
   <input type="checkbox" [(ngModel)]="ang">
  <label>Angular</label><br>
   <input type="checkbox" [(ngModel)]="java">
  <label>Java</label><br>  
  <input type="checkbox" [(ngModel)]="ALL">
  <label>All</label><br>  
  </div>
  <div class="col-8">
   <div class="row">
    <div class="col-6 bg-dark text-light">Name</div>
    <div class="col-6 bg-dark text-light">Course</div>
    </div>
    <div class="row" *ngFor="let st of showStudents">
    <div class="col-6 border"></div>
    <div class="col-6 border"></div>
   </div></div></div></div>

in .Ts

allStudents : Student[]=[
{name:'James',course:'Angular'},
{name:'Kary',course:'Android'},
{name:'Bob',course:'Java'},
{name:'Pam',course:'Java'},
{name:'Steve',course:'Angular'},
{name:'Williams',course:'Android'},
{name:'Julis',course:'Angular'},
{name:'Matt',course:'Java'},
{name:'Willy',course:'Android'},
  ];

showStudents:Student[]=[];
showCourses:string[];

crse:string='';
ang:boolean=false;
and:boolean=false;
java:boolean=false;
ALL:boolean=false;
s:string='Angular';

show(crse) {
if(this.ALL===true){
this.showStudents=this.allStudents;
this.showStudents;
 }
 else if(this.ang===true){ 
 this.allStudents.course==this.s;
 this.showStudents=this.allStudents;
  }}

there might be some useless variables also which i might have created while i was trying different methods.

Please help!!

https://stackblitz.com/edit/angulaar-aman?file=src%2Fapp%2Fapp.component.ts this is the entire work.




Aucun commentaire:

Enregistrer un commentaire