如何选择离子中的多个复选框

Question

我正在使用离子框架为我的应用程序开发，并希望选择多个复选框点击标题复选框或按钮。

    <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>

当我点击“颜色”时，三个复选框都应该被点击。当我取消其中的任何一个，“颜色”也应该不被检查，只有其他两个应该保留。

我使用普通的HTML复选框和javascript实现了这一点，但是对于如何使用离子型的方法有点不确定。

请帮帮忙。

谢谢

Answer 1

也许你需要这样的东西：

<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;
            }