<html ng-app="app"> <head> <title>Angular1 Example</title> <script src='/images/loading.gif' data-original="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <script> angular .module('app', []) .controller('appCtrl', function($scope, $interval) { var gridWidth = 30; var gridHeight = 500; var interval = 50; var changePerInterval = 10000; var names = ['Joe', 'Michael', 'David', 'Jones', 'Phil', 'Johnson', 'Janes', 'Anna', 'Hugo', 'Lina', 'Scotte', 'Nam', 'Tran', 'Bill', 'Mark', 'Rihanna', 'Justin', 'Bieber', 'James', 'Cameron', 'Peter', 'Anderson', 'Ronaldo', 'Scholes', 'Giggs', 'Lee', 'Cedric', 'Young', 'Zim', 'Hue', 'Zac', 'Jonas', 'Miley', 'Thomas', 'September', 'Green', 'Red', 'Rose', 'Pink']; $scope.grid = createGrid(); beginDataChanges(); function createGrid() { var grid = []; for (var row = 0; row < gridHeight; row++) { grid[row] = []; for (var column = 0; column < gridWidth; column++) { grid[row].push(getRandomName()); } } return grid; } function getRandomNumber(maxBound) { return Math.floor(Math.random() * maxBound); } function getRandomName() { var i = getRandomNumber(names.length); return names[i]; } function beginDataChanges() { $interval(function() { $scope.grid = createGrid(); }, interval); } }); </script> </head> <body ng-controller="appCtrl"> <table> <tr ng-repeat="row in grid track by $index"> <td ng-repeat="name in row track by $index"> {{name}} </td> </tr> </table> </body> </html> |