CODEWITHSUNDEEP
angularangular2-directives
Bob Zhang
Bob Zhang

Reputation: 891

How to dynamically bind the value of a checkbox Angular 2

Hi all: I have a component. The component view has a table:

<div class="container">
<h2>Recipients List</h2>
<br>
<table class="table table-striped">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Phone</th>
            <th>Status</th>
            <th>Select</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="#rp of arrAll">   
            <td>{{rp.id}}</td>             
            <td>{{rp.name}}</td>
            <td>{{rp.phone}}</td>                
            <td>{{rp.isActivated?'Active':'Inactive'}}</td>             
            <td>
                <input #{{rp.id}}  type="checkbox" (change)="checkbox(value)">
            </td>
        </tr>          
    </tbody>
</table>

<button class="btn btn-success" (click)="newRecipient()">New Recipient</button>
<button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button>

Here is a link to an image of the table view which was generated using *ngFor.

The business logic is "When the delete button is clicked all the checked recipients must be deleted". I want to pass a parameter to my delete function (which I think should be an array containing the checked recipient ids)

Here is my component code:

import {Component} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
import { Router, RouteParams } from 'angular2/router';
import {RecipientsService}    from'../../services/recipients/recipients.service';
import {Recipient} from '../../models/recipient/recipient';

@Component({
selector: 'recipient-list-view',
templateUrl: './app/components/recipient-list-view/recipient-list-view.html',
styleUrls: ["./app/components/recipient-list-view/style.css"]
})

export class RecipientListViewComponent {

arrAll: Recipient[];

constructor(private recipientsService: RecipientsService, params:    RouteParams, private router: Router) {
    this.arrAll = recipientsService.getAll();        
}

newRecipient() {
    this.router.navigate(['../NewRecipient']);
}

deleteRecipients() {  //need to know which recipients are checked

    console.log("delete");
}


}

I would like to know how to achieve this.

Cheers

Upvotes: 11

Views: 48667

Answers (3)

Joel Almeida
Joel Almeida

Reputation: 8047

Add a property selected to your recipient. On the checkbox change, put it as true.

Once the user clicks delete all recipients, just filter the list for the ones who are selected.

Something like this: 

<div class="container">
    <h2>Recipients List</h2>
    <br>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Phone</th>
                <th>Status</th>
                <th>Select</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="#rp of arrAll">   
                <td>{{rp.id}}</td>             
                <td>{{rp.name}}</td>
                <td>{{rp.phone}}</td>                
                <td>{{rp.isActivated?'Active':'Inactive'}}</td>             
                <td>
                    <input #{{rp.id}}  [(ngModel)]="rp.selected" type="checkbox" (change)="checkbox(rp)">
                </td>
            </tr>          
        </tbody>
    </table>

    <button class="btn btn-success" (click)="newRecipient()">New Recipient</button>
    <button class="btn btn-danger pull-right" (click) ="deleteRecipients()">Delete Recipients</button>
</div>

And the component: 

export class RecipientListViewComponent {

     arrAll: Recipient[];

     constructor(private recipientsService: RecipientsService, params: RouteParams, private router: Router) {
        this.arrAll = recipientsService.getAll();        
    }

    newRecipient() {
        this.router.navigate(['../NewRecipient']);
    }

    deleteRecipients() {  //need to know which recipients are checked
        let selected = this.arrAll.filter((x) => x.selected)
        console.log(selected);
    }

    checkbox(recipient) {
        recipient.selected = (recipient.selected) ? false : true;
    }
}

Upvotes: 11

Siva
Siva

Reputation: 2795

If you can add one more property to your "Recipient" model, then is very much easy to track the selected records.

Added a "selected" property in your Recipient model and two way bind the checkbox to selected property.

<input #{{rp.id}}  type="checkbox" [(ngModel)]="rp.selected">

Now add a method in the component to get all selected records

private getSelected() {
    return this.arrAll.filter((item) => item.selected);
}

Then get the selected records

deleteRecipients() {  
    console.log(this.getSelected());
}

Upvotes: 2

Sukanya Dasgupta
Sukanya Dasgupta

Reputation: 323

Add a function in your controller that would be triggered when checking the checkbox (ng-click of checkbox). Depending on the value of the checkbox, you'll know if it's being checked/unchecked. Maintain another model for the list of checked recipients. Append the recipient to the list if checked, delete if unchecked. When calling delete just delete ones in that model?

Upvotes: 0

Related Questions