Question

我正在尝试制作一个多选选项的简单演示。我的演示中也有限制。换句话说，用户只能选择两个项目。

我能够做到这一点但是当用户选择第三个时，会选择第二个复选框。按下确定按钮后显示警报，然后取消选中。我想只有当用户选择第三项时才会显示警报。这是我的代码 http://codepen.io/anon/pen/NqdmNv

点击按钮会显示一个弹出屏幕。选择＆＃34; A＆＃34;和＆＃34; B＆＃34;那么＆＃34; C＆＃34;。它显示＆＃34; c＆＃34;检查并在用户按下确定时显示警报，然后c变为未选中状态。我只需要提醒而不是＆＃34; c＆＃34;被检查第二。

angular.module('ionicApp', ['ionic'])
.controller('MyController', function($scope, $ionicPopover) {
  $scope.MAX=2;
  $scope.countMax = 0;
  $scope.data =[
    {"name":"A", value:false},
    {"name":"B", value:false},
    {"name":"C", value:false},
    {"name":"D", value:false},
    {"name":"E", value:false}
  ]
  $ionicPopover.fromTemplateUrl('my-popover.html', {
    scope: $scope
  }).then(function(popover) {
    $scope.popover = popover;
  });


  $scope.openPopover = function($event) {
    $scope.popover.show($event);
  };

   $scope.closePopover = function() {
    $scope.popover.hide();
  };
  $scope.maxCheck = function($index){
    $scope.countMax = 0;
    for(i=0;i<$scope.data.length;i++){
      if($scope.data[i].value == true)
        $scope.countMax++;
    }
    console.log("CALC",$scope.countMax,$scope.MAX)
    if($scope.countMax > $scope.MAX){
      $scope.data[$index].value = false;
      alert("limit reached");
    }



  }
}
)

Answer 1

将alert换成setTimeout。 codepen

  setTimeout(function () {
    alert("limit reached");
  });

通过执行此操作，警报不会阻止执行，因此您的复选框逻辑可以在警报弹出之前完成。基本上警报被放在browser event loop

的末尾

Answer 2

Hi shruti你可以使用ng-disabled，这样一旦count == 2禁用其他单选按钮。

 <input type="checkbox" ng-model="item.value" ng-click="maxCheck($index)" ng-disabled="dis">

 $scope.countMax = 0;
  $scope.dis=false;
  $scope.maxCheck = function($index){
   var z=0;
    for(i=0;i<$scope.data.length;i++){

       if($scope.data[i].value == true)
         {
            if($scope.countMax >= $scope.MAX)
             {
                alert("limit reached");
               //$scope.data[$index].value = false;
                $scope.dis=true;
             }
         else
          $scope.countMax++;
         }



    }

将countMax设为全局。

AngularJS：为什么要显示复选框？

2 个答案: