为什么我的角度脚本运行无限循环?

时间:2016-06-28 11:40:41

标签: javascript angularjs

我要做的是通过事件点击页面加载并使用for循环检查三个框。发生的事情是它运行一个无限循环然后页面挂起。这是代码:

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

以下是plunker:http://plnkr.co/edit/7DpCvkKLlKhRc3YwFTq0?p=info

PS

如果您评论或删除angular.element触发器,则不会发生这种情况。如果有人可以提供代码,通过循环触发复选框上的点击事件。 那将是伟大的

1 个答案:

答案 0 :(得分:1)

您可以通过将默认值设置为复选框来以Angular方式执行此操作:

当您使用ng-model时,在控制器中,只需将deanarmada设置为true

更新:

然而我调试了你的JS。 Here是你职能部门的一员。我在循环中使用了y(已经定义了x)并且稍微改变了循环的条件。

无论如何,我建议你使用Angular ......: - )