Angular2、チェックボックスをオンにしたチェックボックスのリストを切り替えます

Angular2でチェックボックスをオンにする方法はありますか？Angular2、チェックボックスをオンにしたチェックボックスのリストを切り替えます

私は、ボタンを押すと完全なリストが表示されているので、リスト内のチェックされたアイテムだけが表示されます。ボタンをもう一度押すと、リスト全体が表示されます。

Plunkr：http://plnkr.co/edit/jZz4XoHjYJ40bjt2eOU5?p=preview

//our root app component 
import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 
     <li *ngFor="let col of data" class="form-group"> 
            <input type="checkbox" name="col" value="{{col.value}}" [(ngModel)]="col.value" (change)="addColumns(col)" />{{col.name}} 
            </li> 
    `, 
}) 
export class App { 
    name:string; 
    data:any[]=[{"id":"13","name":"AAA"},{"id":"15","name":"BBB"},{"id":"20","name":"CCC"}] 
    constructor() { 
    this.name = 'Angular2' 
    } 
    get selectedcheckboxes() { 
    return this.data 
     .filter(opt => opt.value) 

    } 

    addColumns(col){ 
    this.selectedcheckboxes; 
    console.log(this.selectedcheckboxes) 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule,FormsModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}

HTML：Angular1で

<body> 
    <my-app> 
    loading... 
    </my-app> 
    <button class="check">Collapse/Expand</button> 
    </body>

、それは次のようになります。http://jsfiddle.net/jzhang172/of4yy8k9/私はAngular2で同じことを行うために探していますが、理解することはできません構文。

出典

2017-08-24 Snorlax

あなたが言うことを意味します。ボタンを押すとチェックされたチェックボックスをすべてオフにしたい場合 –

@UbiquitousDevelopersいいえ、ボタンを押すとチェックボックスのみのリストが表示されます。もう一度ボタンを押すと、リスト全体が再表示されます。チェックボックス（チェックボックスもチェックされていないボタン） – Snorlax

同じボタンに2つの機能を追加したいのですか？ –

コンポーネントでフィルタを実装し、テンプレートでフィルタを呼び出すことができます。

フィルタでは、フィルタを適用するか、元のリストを表示するようにフラグを追加し、ボタンをクリックしてフラグを切り替えるだけです。テンプレートで

のInvokeフィルタ

*ngFor="let col of getData()"

フィルターデータコンポーネント

getData() { 
    return this.filter ? this.data.filter(item => item.value === true) : this.data; 
}

Plunker Demo

出典

2017-08-24 06:04:19 Pengyy

にあなたは他の変数にメインアレイを配置し、ちょうど応じてデータ変数を変更することができますあなたのクリックされたボタン（展開するか、または折りたたむ）を定義するには、 sの完全なリストまたは選択リスト

何かのように：

isFullList: boolean; 
mainData: Array<any> = [your main data here]; 
data: Array<any> = [data to use in list]; //should initied by mandata 
toggle() { 
    //this.isFullList: boolean 

    if (!this.isFullList) { 
     this.data = [...this.mainData]; 
    } else { 
     this.data = [...this.selectedcheckboxes]; 
    } 
    console.log(this.data) 
    this.isFullList = ! this.isFullList 
}

plunker：http://plnkr.co/edit/V1iiX87gYVMUtIkmpMfT?p=preview

出典

2017-08-24 06:04:56 Fetrarij

Angular2、チェックボックスをオンにしたチェックボックスのリストを切り替えます

答えて

関連する問題