Angular $interval

In this example below you will see how to do a Angular $interval with some HTML / CSS and Javascript

Source: http://stackoverflow.com/questions/26447923/how-to-clear-or-stop-timeinterval-in-angularjs

Thumbnail
This awesome code was written by 01fade, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 01fade ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Angular $interval</title>
  
  
  
  
  
</head>

<body>

  <!-- http://stackoverflow.com/questions/26447923/how-to-clear-or-stop-timeinterval-in-angularjs -->
<div ng-app="app" ng-controller="ItemController">
  
  <!-- Event trigger to start the interval -->
  <button type="button" ng-click="start()">Start Interval</button>
  
  <!-- Event trigger to stop the interval -->
  <button type="button" ng-click="stop()">Stop Interval</button>
  
  <!-- display all the random items -->
  <ul>
    <li ng-repeat="item in items track by $index" ng-bind="item"></li>
  </ul>
  <!-- end of display -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/01fade/angular-dollarinterval-doYLKr */
//http://stackoverflow.com/questions/26447923/how-to-clear-or-stop-timeinterval-in-angularjs
angular.module('app', [])
  .controller('ItemController', function($scope, $interval) {
    // store the interval promise in this variable
    var promise;
    // simulated items array
    $scope.items = [];
    
	
    $scope.start = function() {     // starts the interval
      // stops any running interval to avoid two intervals running at the same time
      $scope.stop();
      // store the interval promise
      promise = $interval(setRandomizedCollection, 1000);
    };
  
    $scope.stop = function() {    // stops the interval
      $interval.cancel(promise);
    };
  
    // starting the interval by default
    $scope.start();
            
    function setRandomizedCollection() {
      // items to randomize 1 - 11
      var randomItems = parseInt(Math.random() * 10 + 1); 
      // empties the items array
      $scope.items.length = 0;       
      // loop through random N times
      while(randomItems--) {
        // push random number from 1 - 10000 to $scope.items
        $scope.items.push(parseInt(Math.random() * 10000 + 1)); 
      }
    }
  
	
    // stops the interval when the scope is destroyed,
    // this usually happens when a route is changed and 
    // the ItemsController $scope gets destroyed. The
    // destruction of the ItemsController scope does not
    // guarantee the stopping of any intervals, you must
    // be responsible of stopping it when the scope is
    // is destroyed.
    $scope.$on('$destroy', function() {
      $scope.stop();
    });
	
  });

Comments