单击菜单并刷新Json [离子]

Question

我希望有一个带有章节列表的边菜单，例如: chap1，chap2..chap10。如何更改内容如果我点击chap1，内容会显示第一章的内容？从JSON文件中检索内容。

//路由

.state('chapter', {
        url: '/chapter/:aId',
        templateUrl: 'templates/chapters.html',
        controller: 'ChapterController'
    })

//控制器

.controller('ChapterController', function($scope, $stateParams, $http, $ionicSlideBoxDelegate, $ionicSideMenuDelegate){

    $http.get('js/bb.json').success(function(data){

        $scope.chapters = data.bb;

        $scope.imagesArray = [];
        data.bb.forEach(function (item) {
            if(item.chapter == $stateParams.aId){
                item.images.forEach(function (image) {
                    $scope.imagesArray.push({
                        src: image
                    });
                });
            }
        });
        $ionicSlideBoxDelegate.$getByHandle('image-viewer').update();

        $scope.reloadChap = function(){
            $scope.imagesArray = [];
            data.bible.forEach(function (item) {
                // console.log($stateParams);
                if(item.chapter == $stateParams.aId){
                    item.images.forEach(function (image) {
                        $scope.imagesArray.push({
                            src: image
                        });
                    });
                }
            });
        }
    });
})

我这里的问题是，当我点击chap2时，内容不会更改为第二章的内容，但上面的url更改为‘/chap2/2’。

万分感谢。

Answer 1

假设您的json如下所示

$scope.chapters = [{chapter 1: 'text', number: '1'}, {chapter 2: 'text', number: '2'}];

在侧边菜单中，您想要显示所有可以点击的章节

<ion-side-menu side="right" ng-click="showChapterContent($index)">
    <div class="item" ng-repeat="chapter in chapters">
        {{chapter.number}}
    </div>
</ion-side-menu>

请参见ng-click函数，该函数将传入您所单击的任何章节的索引。这样你就有了离子端菜单的内容。

<ion-side-menu-content>
  {{chapterContent}}
  </ion-side-menu-content>

在你的控制器中

$scope.showChapterContent = function(index){
    $scope.chapterContent = $scope.chapters[index].chapter;
};

然后，当您单击侧边菜单中的章节时，它将从json文件中获取适当的文本，并将其显示在页面的中间内容中。