Routing through a list of random id's with Angularjs

Question

What I'm trying to do is show content from a json file, this content is always different but has several types, the content is made up of pages that are separated in chapters. I've got 2 ways of getting to a page, an aside menu and a next and previous button.

I've not got any further than showing the content by putting {{$index}} or {{ page.id }} in the href to get in the URL. {{ page.id }} wouldn't work because the controller will take this number and use it in an array, taking the 5th item if the id of the 1st item is 4.

So here's what I've got.

controllers:

app.controller('projectController', ['$scope', '$route', 'projects', function($scope, $route, projects) {
  projects.success(function(data) {
    $scope.projects = data;
  });

app.controller('chapterController', ['$scope', 'pages', '$routeParams', '$location', function($scope, pages, $routeParams, $location) {
  pages.success(function(data) {
    $scope.pages = data;
      console.log(data);
  });
    $scope.$location = $location;
}]);

app.controller('pageController', ['$scope', 'pages', '$routeParams', '$location', function($scope, pages, $routeParams, $location) {
  pages.success(function(data) {
    $scope.pages = data[$routeParams.id];
    console.log(data[$routeParams.id]);

  });
    $scope.$location = $location;
}]);

app.js:

var app = angular.module('brcks', ['ngRoute']);

angular.module('brcks')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

app.config(function ($routeProvider) { 
  $routeProvider
    .when('/page/:id/type/video', {
        templateUrl: 'partials/video.html'
    })
    .when('/page/:id/type/text', {
        controller: 'pageController',
        templateUrl: 'partials/text.html'
    })
    .when('/page/:id/type/title', {
        controller: 'pageController',
        templateUrl: 'partials/title.html'
    })
    .when('/page/:id/type/image', {
        controller: 'pageController',
        templateUrl: 'partials/img.html'
    })
    .when('/page/:id/type/multiplechoice', {
        controller: 'pageController',
        templateUrl: 'partials/multi.html'
    })
    .when('/page/:id/type/boolean', {
        controller: 'pageController',
        templateUrl: 'partials/boolean.html'
    })
    .when('/page/:id/type/imagewithtext', {
        controller: 'pageController',
        templateUrl: 'partials/imgtext.html'
    })
    .when('/page/:id/type/quote', {
        controller: 'pageController',
        templateUrl: 'partials/quote.html'
    })
    .when('/page/:id/type/', {
        controller: 'pageController',
        templateUrl: 'partials/universal.html'
    })
});

parts of the .php file:

<!-- dropdown menu -->
    <div id="aside" class="col-xs-12 col-sm-4 col-md-3 aside" ng-controller="projectController">
        <div class="wrapper">
            <ul class="shadowdiv">
                <li><p><b>Index</b><img src="assets/images/icon-close.svg" onClick="hide()" class="close"></p>
                    <div class="scrollable">
                        <ul ng-repeat="project in projects.chapters">
                            <li class="chapters"><p><b>{{ project.name | uppercase }}</b></p>
                                <ul>
                                    <li ng-repeat="page in project.pages"><a href="#/page/{{ page.id }}/type/{{ page.content.type }}{{ page.question.type }}"><p><b>Question {{ $index + 1 }}: </b>{{ page.name }}</p></a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
      </div>

<!-- next & previous buttons -->
        <div id="controls" ng-controller="chapterController">
           <a href="#/page/{{ pages[0].id }}/type/{{ pages[0].question.type }}{{ pages[0].content.type }}"><div class="next">
              <img src="assets/images/icon-next.svg">
           </div></a>
           <a href="#/page/{{ pages[0].id }}/type/{{ pages[0].question.type }}{{ pages[0].content.type }}"><div class="prev">
              <img src="assets/images/icon-prev.svg">
           </div></a>
        </div>

I've got an ng-view under this to show the actual content.

Project.json (this gets used by the projectController)

{
"id": 1,
"name": "Test Project 1",
"description": "test test",
"company_id": 2,
"cover_image": null,
"time_to_complete": 1140,
"custom_css": "",
"chapters": [{
    "id": 3,
    "name": "Chapter 1",
    "pages": [{
        "id": 4,
        "name": "MultipleChoice",
        "question": {
            "id": 6,
            "page_id": 4,
            "type": "multiplechoice"
        }
    }, {
        "id": 5,
        "name": "Boolean",
        "question": {
            "id": 7,
            "page_id": 5,
            "type": "boolean"
        }
    }, {
        "id": 25,
        "name": "Imagewithtext",
        "content": {
            "id": 14,
            "page_id": 25,
            "type": "imagewithtext"
        }
    }, {
        "id": 26,
        "name": "Quote",
        "content": {
            "id": 15,
            "page_id": 26,
            "type": "quote"
        }
    }]
}, {
    "id": 7,
    "name": "Chapter 2",
    "pages": [{
        "id": 30,
        "name": "Page 1",
        "question": {
            "id": 8,
            "page_id": 30,
            "type": "open"
        }
    }, {
        "id": 116,
        "name": "Page 4"
    }]
}]

}

pages.json (this gets used by the chapterController and pageController)

[
{
    "id": 4,
    "name": "MultipleChoice",
    "chapter_id": 3,
    "question": {
        "id": 6,
        "page_id": 4,
        "type": "multiplechoice",
        "correct_answer": 1,
        "name": "Question MultipleChoice Page 1",
        "description": "Description MultipleChoice Page 1",
        "possible_answers": [{
            "value": 1,
            "answer": "answer1 test"
        }, {
            "value": 2,
            "answer": "answer2 test"
        }, {
            "value": 3,
            "answer": "answer3 test"
        }],
        "user_answer": null,
        "correct": false
    }
},
{
    "id": 5,
    "name": "Boolean",
    "chapter_id": 3,
    "question": {
        "id": 7,
        "page_id": 5,
        "type": "boolean",
        "correct_answer": 0,
        "name": "Question Test Page 2",
        "description": "Xcode uses information from the General, Capabilities, and Info tabs of your project to generate an information property list (Info.plist)",
        "user_answer": null,
        "correct": false
    }
},
{
    "id": 25,
    "name": "Imagewithtext",
    "chapter_id": 3,
    "content": {
        "id": 14,
        "page_id": 25,
        "type": "imagewithtext",
        "title": "Page Image with text Test Page 8",
        "text": "Bricks are heavy",
        "image_url": "http://www.fingus.ru",
        "viewed": null
    }
},
{
    "id": 26,
    "name": "Quote",
    "chapter_id": 3,
    "content": {
        "id": 15,
        "page_id": 26,
        "type": "quote",
        "quote": "Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Donec id elit non mi porta!",
        "author": "Title Quote Test Page 9",
        "viewed": null
    }
},
{
    "id": 30,
    "name": "Page 1",
    "chapter_id": 7,
    "question": {
        "id": 8,
        "page_id": 30,
        "type": "open",
        "correct_answer": null,
        "name": "Question Test Open Page 1",
        "description": "Description Test Open Page 1",
        "user_answer": "",
        "correct": true
    }
},
{
    "id": 116,
    "name": "Page 4",
    "chapter_id": 7
}

]

Would it be possible to see all 6 pages in the 2 chapters and being able to click on those to get the info in their own dynamic page from the .json file, and being able to go to the previous and next page with the 2 buttons

<!-- next & previous buttons -->

Any thoughts are greatly appreciated! Please do ask for any missing code.

Answer 1

your array is missing ,creating array for all of data.

 <div> ng-repeat="page in pages track by $index"
        <div id="controls" ng-controller="chapterController">
               <a href="#/page/{{ pages[0].id }}/type/{{ pages[0].question.type }}{{ pages[0].content.type }}"><div class="next">
                  <img src="assets/images/icon-next.svg">
               </div></a>
               <a href="#/page/{{ pages[0].id }}/type/{{ pages[0].question.type }}{{ pages[0].content.type }}"><div class="prev">
                  <img src="assets/images/icon-prev.svg">
               </div></a>
            </div>
    </div>