How to use ng-repeat (For Loop with Numbers) In Angular
In this approach, we are using the ng-repeat directive in AngularJS to create the For Loop with Numbers. In this approach we have taken two custom buttons, in which one button will generate 1-10 numbers using a loop and another button will generate even numbers using a loop. There is a ‘$timeout’ function used that manages the intervals of output generation. Mainly, the ng-repeat which is used in this example is used to iterate over the arrays of generated numbers and then display them dynamically on the web page.
Example: Below is an example that demonstrates the use of For Loop with Numbers using ng-repeat in AngularJS.
HTML
<!DOCTYPE html> <html ng-app="myApp"> <head> <title> AngularJS For Loop with Numbers </title> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"> </script> <style> body { font-family: Arial, sans-serif; text-align: center; } h1 { color: green; } h3 { color: blue; } .results-container { display: flex; justify-content: space-around; } .results-box { background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin: 10px; width: 35%; } button { background-color: #007bff; color: white; border: none; padding: 10px 20px; cursor: pointer; } </style> </head> <body ng-controller="myController"> <h1>w3wiki</h1> <h3> Approach 1: Using ng-repeat (For Loop with Numbers) </h3> <button ng-click="genNum()"> Click to Generate 1-10 Numbers </button> <button ng-click="genEvenNum()"> Click Generate Even 1-10 Numbers </button> <div class="results-container"> <div class="results-box" ng-show="num"> <h4>Generated 1-10 Numbers:</h4> <ul> <li ng-repeat="result in loopResults.numbers"> {{ result }} </li> </ul> </div> <div class="results-box" ng-show="evenNum"> <h4> Generated Even 1-10 Numbers: </h4> <ul> <li ng-repeat="result in loopResults.evenNumbers"> {{ result }} </li> </ul> </div> </div> <script> var app = angular.module("myApp", []); app.controller("myController", function ($scope, $timeout) { $scope.loopResults = { numbers: [], evenNumbers: [] }; $scope.num = false; $scope.evenNum = false; $scope.genNum = function () { $scope.loopResults.numbers = []; $scope.num = true; for (var i = 1; i <= 10; i++) { (function (number) { $timeout(function () { $scope.loopResults.numbers.push( "Generated number: " + number); console.log("Generated number:", number); }, 1000 * number); })(i); } }; $scope.genEvenNum = function () { $scope.loopResults.evenNumbers = []; $scope.evenNum = true; for (var i = 2; i <= 10; i += 2) { (function (number) { $timeout(function () { $scope.loopResults.evenNumbers.push( "Generated even number: " + number); console.log("Generated even number:", number); }, 1000 * (number / 2)); })(i); } }; }); </script> </body> </html> |
Output:
AngularJS For Loop with Numbers & Ranges
AngularJS is used to develop dynamic single-page web applications and is also useful for building the most attractive UI for the application. In some scenarios, we need to print the elements in the application in a loop manner, so for this scenario, we can use the For Loop to iterate over the numbers and also use the Ranges. In web development looping over the data or the numbers is mainly done to perform the actions or most probably to generate the content dynamically. So in AngularJS, we can do this using the For Loop with Numbers & Ranges. In this article, we will see the approaches to how we can use For Loop with Numbers and ranges.
Contact Us