2016-06-28 15 views
-2

Was ich versuche zu tun ist drei Kontrollkästchen per Ereignis klicken Sie auf Seite laden mit der Verwendung von For-Schleife. Was passiert ist, es läuft eine Endlosschleife, dann hängt die Seite. Hier ist der Code:Warum läuft mein eckiges Skript eine Endlosschleife?

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

Hier wird die Plunker: http://plnkr.co/edit/7DpCvkKLlKhRc3YwFTq0?p=info

PS

Wenn Sie den angular.element Trigger Kommentar oder entfernt wird dies nicht auftreten. Wenn jemand einen Code bereitstellen kann, der die Klickereignisse über die Checkboxen per Schleife auslöst. DANN wird es groß

+1

Dies ist nicht, wie Sache in eckigen funktioniert; Überprüfen Sie diese Antwort auf diesen Beitrag http://stackoverflow.com/questions/14514461/how-to-bind-to-list-of-checkbox-values-with-angularjs. – Walfrat

+0

Der Beitrag hat meine Frage nicht wirklich beantwortet. Was ich will ist, dass meine Checkboxen per Trigger beim Laden der Seite angeklickt werden. –

+1

NEIN das wollen Sie nicht, Sie möchten, dass Ihre Checkboxen beim Laden überprüft werden, dazu müssen Sie nur den Modellwert auf dem Controller einstellen und eckig wird es abbilden zum Kontrollkästchen. – Walfrat

Antwort

1

Sie es, indem Sie die Standardwerte auf Ihre Kontrollkästchen der Angular Weise tun:

Wie Sie verwenden ng-model, in dem Controller, setzen nur dean und armada zu true.


UPDATE:

Ich habe gedebuggt doch Ihre JS. Here ist ein Plünderer Ihrer Funktion arbeiten. Ich habe y in der Schleife verwendet (x wurde bereits definiert) und ändere ein wenig die Bedingung der Schleife.

Wie auch immer, ich würde Ihnen empfehlen, mit Angular zu tun ... :-)

+0

Tigger Die Sache mit Ihrem Vorschlag ist .. Die ng-Klick-Funktion wird nicht ausgelöst und ich möchte es über Schleife –

+0

Updated meine Antworten. Ich biete einen Plünderer, der Ihre JS-Funktion korrigieren sollte :) – Mistalis

+0

Awesome! du schaukelst! Du bist der Einzige, der meine knifflige Frage/mein Problem lösen konnte. Was genau ist hier passiert? Scheint, als hättest du gerade "var" hinzugefügt –

Verwandte Themen