Why is my angular script running an infinite loop?

Question

What I am trying to do is check three boxes via event click upon page load with the use of for loop. What happens is it runs an infinite loop then the page hangs. Here is the code:

<!DOCTYPE html>
<html >

  <head>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  </head>

  <body ng-app="ngToggle">
    <div ng-controller="AppCtrl">
        <input type="checkbox" ng-model="dean" ng-click="btnChange($event, values, 1)" id="check-1" name="one" class="here" >
        <input type="checkbox"  ng-model="armada" ng-click="btnChange($event, values, 2)" id="check-2" name="one" class="here" >
        <input type="checkbox"  ng-model="armada" ng-click="btnChange($event, values, 2)" id="check-3" name="one" class="here" >
        <!--<p ng-repeat="btn in btns">-->
        <!--  <input type="checkbox" ng-model="btn.bool" class="here" > {{ btn.value }}-->
        <!--</p>-->
        {{btn  }}
        {{values  }}
    </div>
    <script type="text/javascript">
        angular.module('ngToggle', [])
            .controller('AppCtrl',['$scope', '$timeout', function($scope, $timeout){
            $scope.btns = [{}, {}, {}];
            $scope.values = [];
            $scope.btnChange = function(event, model, val){
              _this = angular.element(event.target);
              x = _this.prop("checked");
              if(x){
                model.push(val);
              }else{
                index = model.indexOf(val);
                model.splice(index, 1);
              }
            };
            ids = [1, 2, 3];

            $timeout(function() {
              for(x=0;x<ids.length;x++){
             angular.element("#check-"+ids[x]).trigger("click");
              }
        }, 1000);
        }]);
    </script>
  </body>
</html>

Here is the plunker: http://plnkr.co/edit/7DpCvkKLlKhRc3YwFTq0?p=info

PS

If you comment or removed the angular.element trigger this will not occur. If someone can provide a code that will trigger the click events on the checkboxes via loop. THEN IT WILL BE GREAT

This is not how thing works in angular; Check this answer on this post http://stackoverflow.com/questions/14514461/how-to-bind-to-list-of-checkbox-values-with-angularjs. — Walfrat, Jun 28 '16 at 11:50
The post did not really answer my question. What I want is my checkboxes to be clicked via trigger upon page load — Dean Christian Armada, Jun 28 '16 at 11:55
NO you do not want that, you want your checkboxes to be checked on loading, for this you just need to set the model value on the controller and angular will map it to the checkbox. — Walfrat, Jun 28 '16 at 11:56
At its core, it does answer the question – you don't *need* to trigger clicks because Angular handles that for you when the data binding is done properly. — JJJ, Jun 28 '16 at 11:57
The thing is.. The ng-click function will not trigger and I want to tigger it via loop — Dean Christian Armada, Jun 28 '16 at 11:59

Mistalis · Accepted Answer · 2016-06-28T12:05:42.170

1

You can do it the Angular way by setting default values to your checkboxes:

As you use ng-model, in your controller, just set dean and armada to true.

UPDATE:

I've nevertheless debugged your JS. Here is a plunker of your function working. I've used y in the loop (x was already defined) and change a bit the condition of looping.

Anyway, I would recommend you to do with Angular... :-)

edited Jun 28 '16 at 12:05

answered Jun 28 '16 at 11:58

Mistalis

17,793
13
73
97

The thing with your suggestion is.. The ng-click function will not trigger and I want to tigger it via loop – Dean Christian Armada Jun 28 '16 at 11:58
Updated my answer. I provide a plunker that should correct your JS function :) – Mistalis Jun 28 '16 at 12:06
Awesome! you rock! You're the only one who was able to solve my tricky question/problem. So what exactly happened here? Seems like you just added "var" – Dean Christian Armada Jun 28 '16 at 13:21
Your `x` was defined to `_this.prop("checked");`, it makes the condition of the loop infinite. So I just created a variable for the loop (`y`) to replace it (and change a bit the break condition of your loop)! Glad I helped! :-) – Mistalis Jun 28 '16 at 13:58
Hi, I just added var and it worked.. May I know what var has to do within the for loop? Without var, it will just do the infinite loop again – Dean Christian Armada Jun 29 '16 at 06:35

Why is my angular script running an infinite loop?

1 Answers1