代码之家 › 专栏 › 技术社区 › danielo

无法在AngularJS中显示会话存储中的JSON对象

angularjs-scope json angularjs html javascript

danielo · 技术社区 · 7 年前

我在从会话存储中显示名为“currentSet”的JSON对象时遇到问题。当我使用文件夹中的JSON文件时,一切都很好,这意味着HTML代码可能很好。我已将问题缩小到$范围。设置或LoadQuike函数,并尝试了几种方法,但无法使其工作。这是控制器的相关部分:

    $scope.set = angular.fromJson(sessionStorage.getItem('currentSet')); //doesn't work
    //$scope.set = 'data/konflikter.js'; //works

    $scope.defaultConfig = {
        'autoMove': true,
        'pageSize': 1,
        'showPager': false
    }

    $scope.onSelect = function (question, choice) {
          question.choices.forEach(function (element, index, array) {
            question.Answered = choice;
          });

        if ($scope.defaultConfig.autoMove == true && $scope.currentPage < $scope.totalItems) {
            $scope.currentPage++;
        }
        else {
            $scope.onSubmit();
        }
    }

    $scope.onSubmit = function () {
        var answers = [];
        $scope.questions.forEach(function (question, index) {
            answers.push({'questionid': question._id, 'answer': question.Answered});
        });
        $http.post('https://fhsclassroom.mybluemix.net/api/quiz/submit', answers).success(function (data, status) {
            $location.path('/');
        });
    }

    $scope.pageCount = function () {
        return Math.ceil($scope.questions.length / $scope.itemsPerPage);
    };

    $scope.loadQuiz = function (data) {
        $http.get(data)
         .then(function (res) {
             $scope.name = res.data.name;
             $scope.questions = res.data.questions;
             $scope.totalItems = $scope.questions.length;
             $scope.itemsPerPage = $scope.defaultConfig.pageSize;
             $scope.currentPage = 1;

             $scope.$watch('currentPage + itemsPerPage', function () {
                 var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
                   end = begin + $scope.itemsPerPage;

                 $scope.filteredQuestions = $scope.questions.slice(begin, end);
             });
         });
    }
    $scope.loadQuiz($scope.set);

2 回复 | 直到 7 年前

pegla 7 年前

好的,我发现了问题所在,你正在加载文件,所以你需要获取文件-或者导入它以获取内容,这就是为什么它可以与你的:

$scope.set = 'data/konflikter.js'; //works but combined with http request

$scope.loadQuiz = function (res) {
    $scope.name = res.data.name;
    $scope.questions = res.data.questions;
    $scope.totalItems = $scope.questions.length;
    $scope.itemsPerPage = $scope.defaultConfig.pageSize;
    $scope.currentPage = 1;

    $scope.$watch('currentPage + itemsPerPage', function () {
        var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
            end = begin + $scope.itemsPerPage;

        $scope.filteredQuestions = $scope.questions.slice(begin, end);
    });
}

danielo 7 年前

在@pegla的帮助下,我解决了这样的问题:

$scope.loadQuiz = function () { 

        $scope.set = angular.fromJson(sessionStorage.getItem('currentSet'));

        $scope.questionsetid = $scope.set.questions[0].questionsetid;
        $scope.name = $scope.set.name;
        $scope.questions = $scope.set.questions;
        $scope.totalItems = $scope.set.questions.length;
        $scope.itemsPerPage = $scope.defaultConfig.pageSize;
        $scope.currentPage = 1;

        $scope.$watch('currentPage + itemsPerPage', function () {
             var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
               end = begin + $scope.itemsPerPage;

             $scope.filteredQuestions = $scope.questions.slice(begin, end);
        });
    }

    $scope.loadQuiz();