如何 select 离子中的多个复选框
how to select multiple checkboxes in ionic
我正在为我的应用程序开发使用离子框架,并希望在单击 header 复选框或按钮时 select 多个复选框。
<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" 时,所有三个复选框都应该被点击。当我取消选中其中任何一个时,"Colors" 也应该取消选中,只有另外两个应该保留。
我使用普通的 HTML 复选框和 javascript 实现了这一点,但有点不确定如何使用离子。
请帮忙。
谢谢
也许你可以使用这样的东西:
<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
一起工作不好。这是工作版本:
<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;
}
我正在为我的应用程序开发使用离子框架,并希望在单击 header 复选框或按钮时 select 多个复选框。
<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" 时,所有三个复选框都应该被点击。当我取消选中其中任何一个时,"Colors" 也应该取消选中,只有另外两个应该保留。
我使用普通的 HTML 复选框和 javascript 实现了这一点,但有点不确定如何使用离子。
请帮忙。
谢谢
也许你可以使用这样的东西:
<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
一起工作不好。这是工作版本:
<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;
}