JSFiddle - React, Tailwind, and code Playground

by Khaled Awad

HTML

<div ng-app="app" ng-controller="myController">
    <div ng-repeat="module in modules">
        {{module.title}}
        <div ng-repeat="clip in module.clips">
            {{clip.title}}<br/>
            <a ng-repeat="transcript in clip.transcripts" href="transcript.href">{{transcript.text}}</a><br/>
        </div>
    </div>
</div>

JavaScript

angular.module('app', [])
.controller('myController', function ($scope) { 
    $scope.modules =  getModules(5);
    
    function getModules(count) {
        var modules = [];
        for (var i = 0; i < count; i++) {
            modules.push({title: 'Module ' + i, clips: getClips(10)});
        }
        return modules;
    }
    
    function getClips(count) {
        var clips = [];
        for (var i = 0; i < count; i++) {
            clips.push({title: 'Clip ' + i, transcripts: getTranscripts(200)});
        }
        return clips;
    }
    
    function getTranscripts(count) {
        var transcripts = [];
        for (var i = 0; i < count; i++) {
            transcripts.push({href:'http://foo.com'+i, text:' foo' + i});
        }
        return transcripts;
    }
});