Post
Ask Question

Using angular.forEach In AngularJS

Introduction

 
This article explains the "angular.forEach" API of AngularJS.
 
AngularJS provides many types of directives and an API that helps us greatly to solve our issues in a very significant manner, here I will also show one more API provided by AngularJS, "angular.forEach".
 
I will create a simple application that will help you in an easy way to understand how you can use it in your complex applications.
 
Step 1
 
First of all you need to add an external Angular.js file to your application, "angular.min.js".
 
For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link to download it: ANGULARJS.
 
After downloading the external file you need to add this file to the Head section of your application.
  1. <head runat="server">  
  2.     <title></title>  
  3.     <script src="angular.min.js"></script>  
  4. </head>  
Step 2
 
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
  1. <html ng-app xmlns="http://www.w3.org/1999/xhtml">  
Now I will work on the JavaScript section of this application, you need to add the following code to the head section of your application:
  1. <script>  
  2.     function x($scope) {  
  3.         $scope.names = [{ Name: 'Anubhav' , Male:true},  
  4.             { Name: 'Mohit', Male: true },  
  5.         { Name: 'Komal', Male: false },  
  6.         { Name: 'Anupriya', Male: false },  
  7.         { Name: 'Girish', Male: true }];  
  8.         $scope.func = function () {  
  9.             var male = 0;  
  10.             angular.forEach($scope.names, function (todo) {  
  11.                     male += todo.Male ? 1 : 0;  
  12.             });  
  13.             return male;  
  14.         };  
  15.     };  
  16. </script>  
Here I have created a function "x" that will be bound as the Controller in the design part of our application.
 
In this function I have provided some initial values under the Name and their Gender.
 
After this I had again created a function "func", in this function I initialized a variable, "male", whose value is set to 0.
 
After initializing the function I used the "angular.forEach()" API. Using angular.forEach we will check whether a person is Male or Female, if male then the variable "male" will increase its value by one and in this way all the users and their genders will be checked and finally the output will be provided.
 
Now our work with JavaScript is completed and we can move to the design part.
 
Step 3
 
Write this code in the body section of your application:
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div ng-app ng-controller="x">  
  4.         <h2>New Development Team</h2>  
  5.         <ul>  
  6.         <li ng-repeat="todo in names">  
  7.             <input ng-model="todo.Name" />  
  8.             <input type="checkbox" ng-model="todo.Male" value="Male" />Male  
  9.         </li>  
  10.         </ul>  
  11.         <span>{{func()}} Male Members are in our Team</span>  
  12.     </div>  
  13.     </form>  
  14. </body>  
Here I bound the Div with the function "x" using the ng-controller directive.
 
In this Div I created an unordered list that is made dynamic using the ng-repeat directive. The ng-repeat Directive helps to create dynamic things, in other words it will work for all the initial values that are provided in the Script section and will allow us to not use multiple Textboxes or Spans to show the data.
 
In this List I took a TextBox and a checkbox, the TextBox is bound to the Names available in the script using ng-model and the Checkbox is bound to the Male/Female value again by using the ng-model.
 
At the end I used a span bound to the function "func", so this span will show the output provided by the "func".
 
Now our application is created and is ready for execution.
 
Output
 
On running the application you will get output like this,
 
angular.forEach
You can see that all the Initial values are displayed in the Textboxes and Male/Female is displayed in the corresponding Checkbox.
 
Number of Mail members are also displayed at the end.
 
Now if I make changes in this output and make some people Female to Male or Vice Versa then the total number of males will also be changed.
 
angular.forEach
The complete code of this application is as follows,
  1. <html ng-app xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.     <script src="angular.min.js"></script>  
  5.     <script>  
  6.         function x($scope) {  
  7.             $scope.names = [{ Name: 'Anubhav' , Male:true},  
  8.                 { Name: 'Mohit', Male: true },  
  9.             { Name: 'Komal', Male: false },  
  10.             { Name: 'Anupriya', Male: false },  
  11.             { Name: 'Girish', Male: true }];  
  12.             $scope.func = function () {  
  13.                 var male = 0;  
  14.                 angular.forEach($scope.names, function (todo) {  
  15.                         male += todo.Male ? 1 : 0;  
  16.                 });  
  17.                 return male;  
  18.             };  
  19.         };  
  20.     </script>  
  21. </head>  
  22. <body>  
  23.     <form id="form1" runat="server">  
  24.     <div ng-app ng-controller="x">  
  25.         <h2>New Development Team</h2>  
  26.         <ul>  
  27.         <li ng-repeat="todo in names">  
  28.             <input ng-model="todo.Name" />  
  29.             <input type="checkbox" ng-model="todo.Male" value="Male" />Male  
  30.         </li>  
  31.         </ul>  
  32.         <span>{{func()}} Male Members are in our Team</span>  
  33.     </div>  
  34.     </form>  
  35. </body>  
  36. </html>


Similar Articles