AngularJS : why checkbox is display?

Question

I am trying to make a simple demo of a multiple select option. I also have a limit in my demo. In other words, a user can only select two items.

I am able to do that but when a user selects a third one, a checkbox is selected for the second. Alert is display when I press the ok button then it become unchecked. I would like only the alert to be displayed when a user select third item. here is my code http://codepen.io/anon/pen/NqdmNv

The click button shows a pop up screen. Select "A" and "B" then "C". It shows "c" checked and alert is display when the user presses ok then c becomes unchecked. I only need the alert not "c" to become checked for second.

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



  }
}
)

it's mandatory the use of an alert? may be you can use something like t4t5.github.io/sweetalert, because an alert pause your code and produce this. — Facundo Pedrazzini
– Facundo Pedrazzini, Commented Jun 1, 2015 at 15:29

azium · Accepted Answer · 2015-06-01 15:40:11Z

3

Wrap your alert in a setTimeout. codepen

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

By doing this, the alert doesn't block execution so your checkbox logic can finish before the alert pops up. Essentially the alert is being chucked onto the end of the browser event loop

answered Jun 1, 2015 at 15:40

azium

20.7k8 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shreyansh · Accepted Answer · 2015-06-01 15:45:22Z

0

Hi shruti You can make use of ng-disabled , so that once the count==2 disabled the other radio buttons.

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



    }

Make countMax as global.

answered Jun 1, 2015 at 15:45

shreyansh

1,6875 gold badges30 silver badges49 bronze badges

Collectives™ on Stack Overflow

AngularJS : why checkbox is display?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related