Question

我正在为我的应用程序使用Angular2和ionic2。在这里，我正在切换。当切换关闭时，我不应该允许用户选择复选框。它对我来说很好。问题是当我选择复选框时，切换打开，如果我再次将其关闭，那些选中的复选框应该被重置。

任何人都可以帮我解决这个问题吗？

我的代码如下的 app.html

<ion-content>
<ion-item class="toggle">
    <ion-label>App Explore</ion-label>
    <ion-toggle class="center" [(ngModel)]="exploreOn" (ionChange)="toggleChange()"></ion-toggle>
</ion-item>
<div class="urban">        
          <div class="ck-button" *ngFor="let slide of tags; let i = index">             
        <label>                 
            <input type="checkbox" value="1" [disabled]="checkboxDisabled" [(ngModel)]="selectname">
            <span>{{slide.tag}} </span>
        </label>
    </div>        
</div>

的 app.ts

export class AppPage {
selectname: boolean = false;
exploreOn: boolean = false;
checkboxDisabled = true;
checkboxEnabled = false;
public posts: any;
tags: any;
constructor(public navCtrl: NavController, public http: Http) {    
this.http.get('./mockAPI/chatList.json').subscribe(
  data => {
    this.posts = data.json();
    this.tags = this.posts.tags;
    console.log("data", this.tags);
  });
}
toggleChange() {   
  if (this.exploreOn != true) {
  this.checkboxDisabled = true;     
  this.selectname = false;
 }    
 else  {
  this.checkboxDisabled = false;
  }
}

**My josn file lies below**
 "tags": [
    {
        "id": 1,
        "tag": "#jetset"
    },
    {
        "id": 2,
        "tag": "#retailtherapy"
    },
    {
        "id": 3,
        "tag": "#eatsipgroove"
    }
]

Answer 1

您可以改用ion-checkbox。

<ion-checkbox value="1" [disabled]="checkboxDisabled" [(ngModel)]="selectname" [checked]="isChecked">

和组件

toggleChange() {   
  if (this.exploreOn != true) {
  this.checkboxDisabled = true;  
this.isChecked= false;   //reset checkbox
  this.selectname = false;
 }    
 else  {
  this.checkboxDisabled = false;
  }
}

Answer 2

只需在您的选择名称行中添加(click)="function()"即可。检查此代码声明一个名为filter的变量

filter: boolean= false;

然后使用html部分中的ngModel来访问并分配其值。

<input type="checkbox" [(ngModel)]="filter" (click)="filterData()">

它将调用函数filterData（），您可以使用它来执行所有功能

filter(){
  this.filter = !this.filter;// this will change value of it true and false 
}

对于更多复选框，您可以使用声明更多变量，如filter1：boolean

使用angular2和ionic2切换时，重置所选复选框

2 个答案: