Foreach Loop In Angularjs
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Pragati
In this tutorial we will show you the solution of foreach loop in angularjs, here we defined array with key and values using those array values in foreach() loop we collected all values only.
Then results are converted to string and displayed on webpage. Foreach() function used to iterate through each item in an array or object.
It works similar to for loop contains all properties of an object in key-value pairs of an object.
Step By Step Guide On Foreach Loop In Angularjs :-
In our application we used foreach() function for showing how to handle.
Each loop functions used when user needs to access each values in an array.
In controller we defined foreach() loop with array ‘list’ of values (‘Prawin,Dharan,Pavi,Anu’) pointed by key ‘name’. when user clicks on ‘Show Items’ button it loads function with parameter ‘list’ and the submit refered by $form object in controller.
Using ‘ng-click’ directive we can calls function defined in controller.
<!DOCTYPE html>
<html lang="en">
<head>
<title>FOREACH LOOP</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myController", ['$scope', function($form) {
$form.list = [{'name':'Prawin'}, {'name':'Dharan'}, {'name':'Pavi'}, {'name':'Anu'} ];
$form.submit=function (list){
var myAccess=[];
angular.forEach(list, function(value,key){
myAccess.push(value.name);
});
if(myAccess.length>0)
$form.theList=myAccess.toString();
}
}]);
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
<p><button ng-click="submit(list)">Show Items</button></p>
<p>{{theList}}</p>
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- Within controller variable ‘myApp’ refers our application definition and added to controller ‘myController’ with $scope object, $form object as parameter.
- In our function with $form object first we created ‘list’ array with ‘Prawin,Dharan,Pavi,Anu’ values. In submit function we created one empty array ‘myAccess’ and in foreach() loop we passing parameters ‘list,function of key and value’ here we pushing value of name to the ‘myAccess’ array.
- After that when comes out at each iteration using if() condition each value in array changed to string format by ‘toString()’ until array value reach ‘0’ and stored to ‘theList’ variable.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here.
- Within a <div> tag we defined our ng-app namely ‘myApp’ it defines our application and controller of application namely ‘myController’ by ng-controller directive.
- In <p> tag we created button ‘Show Items’ for access all names from array and display on webpage. Result also printed within <p> tag.
- When printing anything on webpage we need to use double curly braces within variable name. All <div> <p>tag needs to close respectively.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to handle foreach loop in angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
Using json array of key and values we printed those values only by foreach() loop.
We can change those user defined array values by our own choice that is not affecting our program.
I hope this tutorial on foreach loop in angularjs helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
