Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<div ng-repeat='group in getGroups()'>
<div ng-repeat="r in data | groupby:group" class="group-class">
<div><p>{{r.name}}</p></div>
</div>
</div>
</div>
CSS
.group-class {
background: blue;
}
JavaScript
var myApp = angular.module('myApp',[]);
myApp.filter('groupby', function(){
return function(items,group){
return items.filter(function(element, index, array) {
return parseInt(element.time)==group;
});
}
}) ;
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.data = [
{name: 'AAA', time: '12:05'},
{name: 'BBB', time: '12:10'},
{name: 'CCC', time: '13:20'},
{name: 'DDD', time: '13:30'},
{name: 'EEE', time: '13:40'},
];
$scope.getGroups = function () {
var groupArray = [];
angular.forEach($scope.data, function (item, idx) {
if (groupArray.indexOf(parseInt(item.time)) == -1) {
groupArray.push(parseInt(item.time));
}
});
return groupArray.sort();
}
}