Description :
angular.foreach works very similar to for loop and this loop contains all properties of object in key-value pairs of object. In this example, We have 'values' as an array object and angular.forEach iterate on each property of obj and push will add the name property in 'names' array and display name in UI. See the code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome in the AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="forEachController">
<div ng-repeat="name in names">
{{name}}
</div>
</div>
</body>
</html>
<script>
var app = angular.module("app", []);
app.controller('forEachController', ['$scope', function ($scope) {
$scope.names = [];
var values = [{name: 'Jimi', gender: 'male'},{name: 'Peter', gender: 'male'},{name: 'Bob', gender: 'male'}];
angular.forEach(values, function (value, key) {
$scope.names.push(value.name);
});
}]);
</script>
Description :
In this example of angular.forEach, Push will add values from ['A', 'B', 'C', 'D'] array to val array and index of ['A', 'B', 'C', 'D'] array to idx array and that will be displayed in the UI by the help of ng-repeat. See the code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome in the AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="forEachController">
<p ng-repeat="ix in idx">{{ix}}</p>
<p ng-repeat="vl in val">{{vl}}</p>
</div>
</body>
</html>
<script>
var app = angular.module("app", []);
app.controller('forEachController', ['$scope', function ($scope) {
$scope.idx = [];
$scope.val = [];
angular.forEach(['A', 'B', 'C', 'D'], function (value, index) {
$scope.idx.push(index);
$scope.val.push(value);
});
}]);
</script>
Description :
In this example of angular.foreach, there are three parameter in function value, prop and obj. Value contains name value and prop contain property name and obj contains whole object. See the code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome in the AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="forEachController">
<p ng-repeat="pr in prop">Properties: {{pr}}</p>
<p ng-repeat="vl in val">Value: {{vl}}</p>
{{obj}}
</div>
</body>
</html>
<script>
var app = angular.module("app", []);
app.controller('forEachController', ['$scope', function ($scope) {
$scope.prop = [];
$scope.val = [];
$scope.obj = [];
angular.forEach({ name: 'Todd', location: 'UK' }, function (value, prop, obj) {
$scope.val.push(value);
$scope.prop.push(prop);
$scope.obj.push(obj);
});
}]);
</script>
Description :
In this example of angular.foreach, it will push both key and value i.e property name and its value in 'tempArr'. See the code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome in the AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="forEachController">
{{tempArr}}
</div>
</body>
</html>
<script>
var app = angular.module("app", []);
app.controller('forEachController', ['$scope', function ($scope) {
var values = { Name: 'Java', Location: 'IN', Date: '28/12/2015', Phone: '9855514371' };
$scope.tempArr = [];
angular.forEach(values, function (value, key) {
$scope.tempArr.push(key + ': ' + value);
});
}]);
</script>