Previously we posted an article for Kids Alphabets Tutor in AngularJS and here is another way using $timeout function.
Code Snippet:
<html>
<head>
<title>Angular.js Example</title>
<script src="Scripts/angular.js"></script>
<script>
var nameApp = angular.module('NameApp', []);
nameApp.controller('NameCtrl', function ($scope, $timeout) {
// I initialized only till alphabet 'H'.. Add more if you are topper in LKG.
$scope.letters = ['A-Apple', 'B-Ball', 'C-Cat', 'D-Dog', 'E-Elephant', 'F-Frog', 'G-Girafee', 'H-Horse'];
var i = 0, lengthSize = $scope.letters.length;
var testname = function () {
$scope.test = $scope.letters[i];
if (i < lengthSize - 1)
i = i + 1;
else
i = 0;
$timeout(testname, 2000);
}
$timeout(testname, 2000);
});
</script>
</head>
<body ng-app="NameApp" ng-controller="NameCtrl">
<center>
<h1>
Kids Alphabet Tutor<br /><br />
{{test}}
<img src="Images/{{test}}.PNG" width="75px" height="75px" />
</h1>
</center>
</body>
</html>
Points to Note:
- Image file Name should be the array element names initialized in the $scope.letters.
- Below is the folder structure:
This is how it looks:
