<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.2.9" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="myController">
<h2> Using Lodash </h2>
<ul ng-repeat="(yob, students) in myModel.studentsByYobLodash">
<h3>{{ yob }}</h3>
<div ng-repeat="s in students">
<p> {{s.name}} </p>
</div>
</ul>
<h2>Not using Lodash </h2>
<ul ng-repeat="(yob, students) in myModel.studentsByYob">
<h3>{{ yob }}</h3>
<div ng-repeat="s in students">
<p> {{s.name}} </p>
</div>
</ul>
</div>
</body>
</html>
var app = angular.module("myApp", []);
app.factory('studentsFactory', [function () {
var students = [{
name: 'Tony',
yob: '1987'
},{
name: 'Rachel',
yob: '1988'
}, {
name: 'Eric',
yob: '1988'
}, {
name: 'Jon',
yob: '1988'
}, {
name: 'Tim',
yob: '1989'
}, {
name: 'Bing',
yob: '1987'
}, {
name: 'Valerie',
yob: '1988'
}, {
name: 'Brandon',
yob: '1987'
}, {
name: 'Sam',
yob: '1987'
}]
return {
getStudents: function () {
return students;
}
}
}])
app.controller('myController', ['$scope', 'studentsFactory', function ($scope, studentsFactory) {
$scope.myModel = [];
$scope.myModel.students = studentsFactory.getStudents();
$scope.myModel.studentsByYobLodash = studentsByYearUsingLodash($scope.myModel.students)
$scope.myModel.studentsByYob = studentsByYear($scope.myModel.students);
function studentsByYearUsingLodash (students) {
return _.groupBy(students, 'yob');
}
function studentsByYear(students) {
var arr = [];
angular.forEach(students, function (student) {
var key = student.yob;
_.has(arr, key) ? arr[key].push(student) : (arr[key] = [student]);
})
return arr;
}
}])
/* Styles go here */