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 groups">
<div ng-repeat="material in materialsByGroup(group)">
<div>{{group.name}}</div>
<div>{{material.name}}</div>
</div>
</div>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
myApp.filter('test', function(group) {
});
function MyCtrl($scope) {
var groups = [
{'name':'group one'},
{'name':'group two'}
];
var materials = [
{'name':'material1', groups:[]},
{'name':'material2', groups:[groups[0], groups[1]]},
{'name':'material3', groups:[groups[0]]}
];
$scope.groups = groups;
$scope.materials = materials;
$scope.materialsByGroup = function(group){
for(var i=0; i<materials.length; i++){
if (materials[i].groups.length > 0){
return materials[i].group.name === group.name ?
materials : null;
}
return null;
}
}
}