如果用户选择角度为“所有邻域”复选框,则必须选中所有复选框。我试过下面的代码。但不行。如何解决角度2?
探索-list.Component.html
<div class="checkbox_cont">
<div class="checkbox ">
<!--<input id="modal_checkbox1" type="checkbox" name="categories" unchecked="">-->
<input type="checkbox" name="allneighbourhoods" [value]="allneighbourhoods" (change)="neighbourhoodname [$event.target.getAttribute('value')]=$event.target.checked" id="allneighbourhoods" ng-click="toggleSelect($event)" />
<label for="allneighbourhoods">All Neighbourhoods</label>
</div>
</div>
<div class="modal_line"></div>
<div class="checkbox " *ngFor="let neighbourhood of neighbourhoods;let i=index;">
<input type="checkbox" name="neighbourhoodname[{{i}}]" [value]="neighbourhood" (change)="neighbourhoodname [$event.target.getAttribute('value')]=$event.target.checked" id="{{neighbourhood}}" [checked]='true' />
<label for="{{neighbourhood}}">{{neighbourhood}}</label>
</div>
探索-list.Component.ts
export class ExploreListComponent implements OnInit {
neighbourhoodname={};
toggleSelect = function(event){
this.forEach(this.checkboxes, function(item){
console.log(item);
item.selected = event.target.checked;
});
}
}
邻居json
答案 0 :(得分:6)
您可以在复选框中添加ngModel
<强> [(ngModel)]="neighbourhood.selected"
强>
<form #f="ngForm" novalidate>
<div class="checkbox_cont">
<div class="checkbox ">
<input type="checkbox" id="allneighbourhoods" name="allneighbourhoods" value="allneighbourhoods" (click)="toggleSelect($event)" />
<label for="allneighbourhoods">All Neighbourhoods</label>
</div>
</div>
<div class="modal_line"></div>
<div class="checkbox " *ngFor="let neighbourhood of neighbourhoods;let i=index;">
<input type="checkbox" name="neighbourhoodname[{{i}}]" [checked]="neighbourhood.selected" value="neighbourhood.selected" id="{{neighbourhood.name}}" (change)="neighbourhood.selected = !(neighbourhood.selected)"/>
<label for="{{neighbourhood.name}}">{{neighbourhood.name}}</label>
</div>
<input type="button" (click)="ApplyFilters(f.valid)" class="btn btn-primary filters_btn" value="Apply Filters">
</form>
现在,你的功能将是相同的,
export class ExploreListComponent implements OnInit {
neighbourhoods = [{"name":"Taito"},{"name":"Shinjuku"},{"name":"Shibuya"}];
toggleSelect = function(event){
this.allneighbourhoods = event.target.checked;
this.neighbourhoods.forEach(function(item){
console.log(item);
item.selected = event.target.checked;
});
}
ApplyFilters(isValid: boolean) {
var datas = this.neighbourhoods.filter(function (data) { return data.selected == true });
console.log(datas);
if (!isValid) return;
}
}
我添加了 selected property
,因此selected value
的{{1}}将成为所有复选框的main checkbox
。