<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="BaseController">
<h1>{{title}}</h1>
<br/><br/>
List:
<br/><br/>
{{list}}
<br/><br/>
Using ng-repeat:
<br/><br/>
<div ng-repeat="listItem in list">
{{listItem}}
</div>
<br/><br/><br/><br/>
Enter the group number to filter:
<input type="number" ng-model="groupNumber" />
<button ng-click="findByGroup()">Submit</button>
<br/><br/>
{{group}}
<br/><br/><br/><br/>
<a href="runTest.html">Run Tests</a>
</body>
</html>
// Code goes here
var app = angular.module("app", []);
app.controller("BaseController", function($scope) {
$scope.title = "Angular.ForEach";
$scope.list = [
{firstname: 'shashikanth', lastname: 'Kota', group: 1},
{firstname: 'Rishikanth', lastname: 'Kota', group: 2},
{firstname: 'Nishikanth', lastname: 'Kota', group: 3},
{firstname: 'Lavanya', lastname: 'Kota', group: 1},
{firstname: 'Riya', lastname: 'Kota', group: 1}
];
$scope.findByGroup = function() {
var group = [];
angular.forEach($scope.list, function(value, key){
if(value.group === $scope.groupNumber){
this.push(value);
}
}, group);
$scope.group = angular.bind(this, group);
}
});
/* Styles go here */
Angular.ForEach
for-loop uses index, with that index we load the object and process it.
forEach-loop uses iterator.
Iterator has index, value. value = object.
So it will be easy to handle the object.
describe('Testing BaseController', function() {
var $scope = null;
var ctrl = null;
//you need to indicate your module in a test
beforeEach(module('app'));
beforeEach(inject(function($rootScope, $controller) {
$scope = $rootScope.$new();
ctrl = $controller('BaseController', {
$scope: $scope
});
}));
it('should set title', function() {
expect($scope.title).toEqual('Angular.ForEach');
});
it('should init the list', function() {
var list = [
{firstname: 'shashikanth', lastname: 'Kota', group: 1},
{firstname: 'Rishikanth', lastname: 'Kota', group: 2},
{firstname: 'Nishikanth', lastname: 'Kota', group: 3},
{firstname: 'Lavanya', lastname: 'Kota', group: 1},
{firstname: 'Riya', lastname: 'Kota', group: 1}
];
expect($scope.list).toEqual(list);
});
it('should filter the list with groupNumber', function() {
$scope.groupNumber = 1;
$scope.findByGroup();
expect($scope.group.length).toEqual(3);
expect($scope.group[0]).toEqual({firstname: 'shashikanth', lastname: 'Kota', group: 1});
$scope.groupNumber = 2;
$scope.findByGroup();
expect($scope.group.length).toEqual(1);
expect($scope.group[0]).toEqual({firstname: 'Rishikanth', lastname: 'Kota', group: 2});
})
});
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="app" ng-controller="BaseController">
<a href="index.html"><h1>{{title}}</h1></a>
<!-- Add Jasmine -->
<script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js"></script>
<!-- Jasmine html & css for reporting -->
<link data-require="jasmine@*" data-semver="2.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css" />
<script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine-html.js"></script>
<script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/boot.js"></script>
<!-- Add AngularJS -->
<script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
<!-- AngularJS testing helpers -->
<script data-require="angular-mocks@*" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular-mocks.js"></script>
<script src="script.js"></script>
<script src="spec.js"></script>
</body>
</html>