Question

我有一个带有三个选项的复选框，我想将多个选择列表绑定到每个选项，以便在选中其中一个时，显示该特定列表框。如何在角度2中执行此操作？

import { Component, OnInit } from '@angular/core';
import { DualList1Component } from './dual-list1.component';

@Component({
selector: 'demo-app',
template: `<div class="container-fluid">
            <p>
              <label >
                <input #cb1 type="checkbox" value="North America" (change)="onChange()"> North America<br><br>
              </label>
              <label>
                <input #cb2 type="checkbox" value="Europe,Middle East and Africa"> Europe,Middle East and Africa<br><br>
              </label>
              <label>
                 <input #cb3 type="checkbox" value="Latin America" > Latin America<br><br>
              </label>
            </p>
            <dual-list [sort]="keepSorted" [source]="source" [key]="key" [display]="display" [(destination)]="confirmed" height="265px"></dual-list>
           </div>
})

export class DemoApp1Component implements OnInit{

// tab:number = 1;

 keepSorted:boolean = true;

 key:string;
 display:string;
 source:Array<any>;
 confirmed:Array<any>;

 sourceStations:Array<any>;
// sourceChessmen:Array<any>;

 confirmedStations:Array<any>;
// confirmedChessmen:Array<any>;

 toggle:boolean = true;

 userAdd:string = '';

  stations:Array<any> = [
    { key: 1, station: 'Archana' },
    { key: 2, station: 'Praveen' },
    { key: 3, station: 'Sarat' },
    { key: 4, station: 'Ramesh'},
    { key: 5, station: 'Rami'},
    { key: 6, station: 'Bhargavi'},
    { key: 7, station: 'Sujeet'},
    { key: 8, station: 'Mala'},
    { key: 9, station: 'Harwinder' }
 ]; 

ngOnInit() {
    this.doReset();
}

 useStations() {
    this.toggle = true;
    this.key = 'key';
    this.display = 'station';
    this.keepSorted = true;
    this.source = this.sourceStations;;
    this.confirmed = this.confirmedStations;
}

doReset() {
    //this.sourceChessmen = JSON.parse(JSON.stringify(this.chessmen));
    //this.sourceStations = JSON.parse(JSON.stringify(this.stations));
    //this.confirmedChessmen = new Array<any>();
    this.confirmedStations = new Array<any>();

    if (this.toggle) {
        this.useStations();
        this.confirmedStations.push( { key: 32, station: 'Eureka'} );
    } 
}

doDelete() {
    if (this.source.length > 0) {
        this.source.splice(0, 1);
    }
}

doCreate() {
    let o:any = {};
    o[this.key] = this.source.length + 1;
    o[this.display] = this.userAdd;
    this.source.push( o );
    this.userAdd = '';
}

doAdd() {
    for (let i = 0, len = this.source.length; i < len; i += 1) {
        let o = this.source[i];
        let found = this.confirmed.find( (e:any) => e[this.key] === o[this.key] );
        if (!found) {
            this.confirmed.push(o);
            break;
        }
    }
}

doRemove() {
    if (this.confirmed.length > 0) {
        this.confirmed.splice(0, 1);
    }
}

 onChange() { 
    this.sourceStations = JSON.parse(JSON.stringify(this.stations))
    }
}

Answer 1

你试过在控制器中创建一个标志吗？抱歉，我必须将此作为答案发布，不足以发表评论。

绑定一个复选框和一个listbox-angular 2

1 个答案: