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

回答1:

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;
    }
}

回答2:

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());
}

回答3:

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?

来源：https://stackoverflow.com/questions/35056815/how-to-dynamically-bind-the-value-of-a-checkbox-angular-2