单击菜单并刷新 Json [IONIC]答案

【问题标题】：Click Menu and Refresh Json [IONIC]单击菜单并刷新 Json [IONIC]
【发布时间】：2015-10-21 21:42:14
【问题描述】：

我希望有带有章节列表的侧面菜单，例如：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'。

万分感谢。

【问题讨论】：

标签： javascript jquery json angularjs ionic

【解决方案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 文件中获取相应的文本并将其显示在页面的中间内容中。

【讨论】：