使用Angularjs

时间：2015-10-13 13:19:37

标签： javascript php jquery angularjs url-routing

我要做的是显示来自json文件的内容，此内容总是不同但有几种类型，内容由章节中分隔的页面组成。我有2种方法可以访问页面，旁边的菜单以及下一个和上一个按钮。

通过在{{$index}}中添加{{ page.id }}或href来获取内容，我没有进一步展示内容。 {{ page.id }}无法正常工作，因为控制器将获取此数字并在数组中使用它，如果第1项的ID为4，则取第5项。

所以，这就是我所拥有的。

控制器：

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'
    })
});

.php文件的一部分：

<!-- 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>

我在此下面有ng-view来显示实际内容。

Project.json（由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（这由chapterController和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
}

是否可以查看2章中的所有6个页面，并且能够点击这些页面从.json文件中获取自己的动态页面中的信息，并且能够转到上一页和下一页2个按钮

<!-- next & previous buttons -->

非常感谢任何想法！请查询任何遗漏的密码。

1 个答案:

答案 0 :(得分：0)

您的数组丢失，为所有数据创建数组。 

 <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>
相关问题
最新问题