如何在离子中选择多个复选框 [英] how to select multiple checkboxes in ionic
问题描述
我正在为我的应用程序开发使用离子框架,并希望在单击标题复选框或按钮时选择多个复选框。
I am using ionic framework for my app development and want to select multiple checkboxes on click of header checkbox or button.
<ion-list>
<ion-checkbox ng-model="filter.color">Colors</ion-checkbox>
<ion-checkbox ng-model="filter.blue">Red</ion-checkbox>
<ion-checkbox ng-model="filter.yellow">Yellow</ion-checkbox>
<ion-checkbox ng-model="filter.pink">Pink</ion-checkbox>
<ion-checkbox ng-model="filter.number">Number</ion-checkbox>
<ion-checkbox ng-model="filter.one">1</ion-checkbox>
<ion-checkbox ng-model="filter.two">2</ion-checkbox>
<ion-checkbox ng-model="filter.three">3</ion-checkbox>
</ion-list>
当我点击颜色时,应点击所有三个三个复选框。当我取消选中其中任何一个时,Colors也应该被取消选中,只剩下其他两个。
When I click on "Colors", all three three checkboxes should be clicked. And when I uncheck any one of them, "Colors" should be unchecked as well and only the other two should remain.
我使用普通的HTML复选框和javascript实现了这一点,但有点不确定如何做离子。
I achieved this using normal HTML checkboxes and javascript, but a little unsure on how to do it ionic.
请帮助。
谢谢
推荐答案
可能你可以使用这样的东西:
May be you could use something like this:
<ion-list>
<ion-checkbox ng-model="filter.color" ng-checked="filter.blue && filter.yellow && filter.pink">Colors</ion-checkbox>
<ion-checkbox ng-model="filter.blue" ng-checked="filter.color">Red</ion-checkbox>
<ion-checkbox ng-model="filter.yellow" ng-checked="filter.color">Yellow</ion-checkbox>
<ion-checkbox ng-model="filter.pink" ng-checked="filter.color">Pink</ion-checkbox>
</ion-list>
修改
我发现上面有错误的方法,因为 ngModel
和 ngChecked
一起工作不好。这是工作版本:
I found that above there is wrong approach, because ngModel
and ngChecked
work bad together. This is working version:
<ion-list>
<ion-checkbox ng-model="filter.color" ng-change="changeAllColors()">Colors</ion-checkbox>
<ion-checkbox ng-model="filter.blue" ng-change="checkColors()">Red</ion-checkbox>
<ion-checkbox ng-model="filter.yellow" ng-change="checkColors()">Yellow</ion-checkbox>
<ion-checkbox ng-model="filter.pink" ng-change="checkColors()">Pink</ion-checkbox>
</ion-list>
并且在控制器中:
$scope.changeAllColors = function () {
$scope.filter.blue = $scope.filter.yellow = $scope.filter.pink = $scope.filter.color;
}
$scope.checkColors = function () {
$scope.filter.color = $scope.filter.blue && $scope.filter.yellow && $scope.filter.pink;
}
这篇关于如何在离子中选择多个复选框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!