How to use a Custom ng-repeat with Range In Angular
In this approach, we were using the custom ng-repeat directive with the Range of numbers. Here, the user is allowed to dynamically enter the input as start and end values and after clicking on the button, the dynamic generation and output display of a list of numbers is done within the range specified by the user. This approach is more suitable for making flexible applications as this approach mainly reduces the necessity of hardcoding the numerical range in the code.
Example: Below is an example that demonstrates the use of Ranges using custom ng-repeat in AngularJS.
HTML
<!DOCTYPE html> < html ng-app = "myApp" > < head > < title > AngularJS Range Example </ 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; } .range-container { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 20px; } .range-input { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .range-input label { margin-right: 10px; } .range-result { list-style-type: none; padding: 0; display: flex; } .range-result li { background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-right: 10px; } button { background-color: #007bff; color: white; border: none; padding: 10px 20px; cursor: pointer; } </ style > </ head > < body ng-controller = "myController" > < h1 >w3wiki</ h1 > < h3 > Approach 2: Using a Custom ng-repeat with Range </ h3 > < div class = "range-container" > < div class = "range-input" > < label for = "start" > Start: </ label > < input type = "number" ng-model = "start" id = "start" > </ div > < div class = "range-input" > < label for = "end" > End: </ label > < input type = "number" ng-model = "end" id = "end" > </ div > < button ng-click = "generateRange()" > Generate Range </ button > < ul class = "range-result" > < li ng-repeat = "number in range" > {{ number }} </ li > </ ul > </ div > < script > var app = angular.module("myApp", []); app.controller("myController", function ($scope) { $scope.range = []; $scope.start = 1; $scope.end = 10; $scope.generateRange = function () { $scope.range = []; var start = parseInt($scope.start); var end = parseInt($scope.end); if (!isNaN(start) && !isNaN(end) && start <= end) { for (var i = start; i <= end; i++) { $scope.range.push(i); } console.log("Generated range:", $scope.range); } else { console.log("Invalid input. Please "+ "enter valid start and end values."); } }; }); </ 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