Ionic独家复选框

时间:2016-11-04 11:12:18

标签: javascript angularjs html5 ionic-framework

我正在尝试在Ionic中实现以下功能。选择类型3时,我希望能够取消选择类型1和类型2.当我选择类型1或类型2中的任何一个时,我想取消选择类型3.此外,我希望能够选择类型1和类型2一起。专有组是(Type1和Type2)和(Type3)。当我选择类型3时,它取消选中类型1和类型2,但是当我选择类型2选择类型3时,它不会取消选中类型3.我读到这与更新范围后更新视图有关,我尝试使用$ scope.apply(),但这对我不起作用。有没有更好的方法来实现这种类型的功能。

enter image description here

$scope.setType = function (type) {
    if (type == "1") {
        $scope.type1 = true;
        $scope.type3 = false;
    }
    else if (type == "2") {
        $scope.type2 = true;
        $scope.type3 = false;
    }
    else {
        $scope.type3 = true;         
        $scope.type1 = false;
        $scope.type2 = false;
    }
};

这些是HTML复选框:

<div class="col">
      <ion-item class="nopadding">
          <ion-checkbox type="checkbox" ng-checked="type1" ng-click="setType('1')" value="type1"><b>Type 1</b></ion-checkbox>
      </ion-item>
</div>
<div class="col">
      <ion-item class="nopadding">
          <ion-checkbox type="checkbox" ng-checked="type2" ng-click="setType('2')" value="type1"><b>Type 2</b></ion-checkbox>
      </ion-item>
</div>
<div class="col">
      <ion-item class="nopadding">
          <ion-checkbox type="checkbox" ng-checked="type3" ng-click="setType('3')" value="type1"><b>Type 3</b></ion-checkbox>
      </ion-item>
</div>

0 个答案:

没有答案