Lists all with all

http://angularjs.org/

by anup1986

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<div class="container" ng-controller="MyCtrl">
    <div class="row">
        <div class="col-md-12"> <pre>
                {{combined|json}}
            </pre>

        </div>
    </div>
</div>

CSS

body {
    margin-top: 50px;
}

JavaScript

var myApp = angular.module('myApp', []);
console.clear();
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function restriction(id, name, typeId) {
    this.id = id;
    this.name = name;
    this.typeId = typeId;
};

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    var restrictions = [
    new restriction(1, 'Miniors', 1),
    new restriction(2, 'Kadettes', 1),
    new restriction(3, 'Juniors', 1),
    new restriction(4, 'Seniors', 1),
    new restriction(5, 'Boys', 2),
    new restriction(6, 'Girls', 2),
    new restriction(7, 'Men', 2),
    new restriction(8, 'Women', 2),
    new restriction(9, '54kg - 62kg', 3),
    new restriction(10, '64kg - 70kg', 3),
    new restriction(11, '71kg - 78kg', 3),
    new restriction(12, '79kg - 84kg', 3)];

    function generateCategories() {
        var groups = _.values(_.groupBy(restrictions, function (r) {
            return r.typeId;
        }));
        var categories = [];
        
        // This needs to be dynamic for n number of groups.
        // Maybe use a recursive function call?
        _.each(groups[0], function(restriction1){
            _.each(groups[1], function(restriction2){
                _.each(groups[2], function(restriction3){
                    categories.push(restriction1.name + ' | ' + restriction2.name + ' | ' + restriction3.name);
                });
            });
        });
        
        $scope.combined = categories;
    }
    
    generateCategories();
};