Update the view from the while loop with the angular controller

advertisements

I am in the process of learning angular.js and would like to know if there is a way to update the view from a while loop. I have a button that is clicked that calls a function with a while loop that increments a variable for each iteration. There is a button to cancel the loop. I have read and somewhat understand the $apply/$digest loop that angular uses to update the view. I have also tinkered with the $interval and had it working, but in the end its not fast enough for what i want to eventually do with this.

So is there a way to get the variable that is incremented in the while loop printed to the screen. Here is the code I have so far.

LearningAngular.js

    var myApp = angular.module("myApp", []);
    myApp.controller("myController", myController);

    function myController($scope, $interval) {
        var count = true;
        $scope.counter = 0;

        $scope.start_count = function(){
            //promise = $interval(function() {
            //   $scope.counter++;
            //},1);
            while (count == true) {
                $scope.counter++;
            }
        }

       $scope.stop_counting = function(){
            //$interval.cancel(promise);
            count = false;
        }
    }
    <!DOCTYPE html>

    <html>
    <head>
        <title>Learning Angular</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>

    <body ng-app="myApp" ng-controller="myController">

        <button ng-click="start_count()">Start Counting</button><br>
        Counter: <span>{{counter}}</span><br>

        <button ng-click="stop_counting()">Stop Counting</button>

    </body>
    </html>

edit what happens is when the ng-click calls the start_count() function the code goes into the while loop. If I have my debugger open in chrome and click the button then put a break point at the $scope.counter++ I can see that the counter is being incremented. It just isn't displaying on the screen. I don't want to use the setInterval or $interval functions provided as they aren't fast enough for what I intend to use the code for. In a nut shell I will be comparing simulated power ball numbers chosen by a user to one the computer draws. The setInterval and $interval functions will be good for this but will take to long to get any where. The computer can check a couple million in a few seconds but not if it is restricted with an interval.


While loop you've implemented happens within a single iteration of $apply/$digest, so it will never see changes of a counter. I'm not sure what is the right way to achieve expect behavior with angular, but you can easily implement this with pure javascript using setInterval or setTimeout functions. Logic would be exactly the same you've implemented except you'll call setInterval instead of starting while loop. Hope this helps.