如何动态绑定复选框Angular 2的值

时间：2016-01-28 08:55:32

标签： angular angular2-directives

大家好：我有一个组件。组件视图有一个表：

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

以下是使用* ngFor。

生成的table view图片的链接

业务逻辑是“单击删除按钮时，必须删除所有已检查的收件人”。我想将一个参数传递给我的删除函数（我认为应该是一个包含已检查的收件人ID的数组）

这是我的组件代码：

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


}

我想知道如何实现这一点。

干杯

3 个答案:

答案 0 :(得分：11)

将属性 GNU nano 2.2.6 File: apache2.conf # This is the main Apache server configuration file. It contains the # configuration directives that give the server its instructions. # See http://httpd.apache.org/docs/2.4/ for detailed information about # the directives and /usr/share/doc/apache2/README.Debian about Debian specific # hints. # # # Summary of how the Apache 2 configuration works in Debian: # The Apache 2 web server configuration in Debian is quite different to # upstream's suggested way to configure the web server. This is because Debian's # default Apache2 installation attempts to make adding and removing modules, # virtual hosts, and extra configuration directives as flexible as possible, in # order to make automating the changes and administering the server as easy as # possible. # It is split into several files forming the configuration hierarchy outlined # below, all located in the /etc/apache2/ directory: # # /etc/apache2/ # |-- apache2.conf # | `-- ports.conf # |-- mods-enabled # | |-- *.load # | `-- *.conf # |-- conf-enabled # | `-- *.conf # `-- sites-enabled # `-- *.conf # # # * apache2.conf is the main configuration file (this file). It puts the pieces # together by including all remaining configuration files when starting up the # web server. # # * ports.conf is always included from the main configuration file. It is # supposed to determine listening ports for incoming connections which can be # customized anytime. # # * Configuration files in the mods-enabled/, conf-enabled/ and sites-enabled/ # directories contain particular configuration snippets which manage modules, # global configuration fragments, or virtual host configurations, # respectively. # # They are activated by symlinking available configuration files from their # respective *-available/ counterparts. These should be managed by using our # helpers a2enmod/a2dismod, a2ensite/a2dissite and a2enconf/a2disconf. See # their respective man pages for detailed information. # # * The binary is called apache2. Due to the use of environment variables, in # the default configuration, apache2 needs to be started/stopped with # /etc/init.d/apache2 or apache2ctl. Calling /usr/bin/apache2 directly will not # work with the default configuration. # Global configuration # # # ServerRoot: The top of the directory tree under which the server's # configuration, error, and log files are kept. # # NOTE! If you intend to place this on an NFS (or otherwise network) # mounted filesystem then please read the Mutex documentation (available # at <URL:http://httpd.apache.org/docs/2.4/mod/core.html#mutex>); # you will save yourself a lot of trouble. # # Do NOT add a slash at the end of the directory path. # #ServerRoot "/etc/apache2" # # The accept serialization lock file MUST BE STORED ON A LOCAL DISK. # Mutex file:${APACHE_LOCK_DIR} default # # PidFile: The file in which the server should record its process # identification number when it starts. # This needs to be set in /etc/apache2/envvars # PidFile ${APACHE_PID_FILE} # # Timeout: The number of seconds before receives and sends time out. # Timeout 300 # # KeepAlive: Whether or not to allow persistent connections (more than # one request per connection). Set to "Off" to deactivate. # KeepAlive On # # MaxKeepAliveRequests: The maximum number of requests to allow # during a persistent connection. Set to 0 to allow an unlimited amount. # We recommend you leave this number high, for maximum performance. # MaxKeepAliveRequests 100 # # KeepAliveTimeout: Number of seconds to wait for the next request from the # same client on the same connection. # KeepAliveTimeout 5 # These need to be set in /etc/apache2/envvars User ${APACHE_RUN_USER} Group ${APACHE_RUN_GROUP} 添加到收件人。在复选框更改时，将其设置为true。

用户点击删除所有收件人后，只需筛选所选收件人的列表。

这样的事情：

selected

组件：

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

答案 1 :(得分：2)

如果您可以向＆＃34;收件人添加一个属性＆＃34;模型，然后非常容易跟踪选定的记录。

添加了＆＃34;已选择＆＃34;收件人模型中的属性，双向将复选框绑定到选定的属性。

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

现在在组件中添加一个方法以获取所有选定的记录

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

然后获取所选记录

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

答案 2 :(得分：0)

在控制器中添加一个功能，在选中复选框时会触发该功能（按住该键复选框）。根据复选框的值，您将知道是否正在选中/取消选中它。维护已检查收件人列表的另一个模型。如果选中，则将收件人附加到列表，如果未选中则删除。调用delete时只删除该模型中的那些？

相关问题
最新问题