0
<ul class="show-result">
    <li *ngFor="let staff of  allStaffs;">
        <div>
            <input type="checkbox" >{{ staff.perscode }} | {{ staff.personName }}
         </div>
    </li>
</ul>
<button class="btn btn-primary ripple" (click)="addSelectedStaff()">Add</button>

where all staff value is

allStaffs = [{
               "perscode":23277,
               "personName":"Rahma Said Ali",
               "personCategoryCode":1011,
               "personCategoryName":"A.Pharmacist"
            },
            {
               "perscode":24825,
               "personName":"Zainab Abdul Baqi",
               "personCategoryCode":1011,
               "personCategoryName":"A.Pharmacist"
            } ]

How can I get the selected check boxes at Add button click

I have tried to Add this code in angular2 component. I need to know which all are checked. This is not working.

addSelectedStaff(){
   console.log("@@ selected options :"+this.selectedOptions);
}

 get selectedOptions() { // right now: ['1','3']
    return this.allStaffs
              .filter(opt => opt.perscode)
              .map(opt => opt.personName)
  }

Need to get the entire selected object list.

The Hungry Dictator
  • 3,444
  • 5
  • 37
  • 53
user630209
  • 1,123
  • 4
  • 42
  • 93
  • 1
    I think the easiest way would be to add a new property to keep track of which is checked and which not: https://stackoverflow.com/a/45170912/6294072 – AT82 Jul 20 '17 at 08:11

1 Answers1

0

try this way 

  <ul class="show-result">
        <li *ngFor="let staff of  allStaffs;">
            <div>
                <input type="checkbox" value="{{staff.value}}"
                       [(ngModel)]="staff.perscode" >{{ staff.perscode }} | {{ staff.personName }}
             </div>
        </li>
    </ul>
    <button class="btn btn-primary ripple" (click)="addSelectedStaff()">Add</button>

component. 

addSelectedStaff() { 
    console.log(this.allStaffs
              .filter(staf => staf.perscode)
              .map(staf=> staf.value))
  }
Ramesh Rajendran
  • 37,412
  • 45
  • 153
  • 234