Question

我希望在章节列表中有侧面菜单，例如：chap1，chap2..chap10。如果我点击chap1如何改变内容，内容会显示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时，内容不会改为chap2的内容，但上面的url已更改为'/ chapter / 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文件中获取相应的文本并将其显示在页面的中间内容中。

单击“菜单”并刷新Json [IONIC]

1 个答案: