使用$http.get显示json文件中的一个数组项

Show one array item from json file using $http.get

本文关键字：一个数组 http get 显示文件 json 使用更新时间：2023-09-26

我正在制作一份问卷，并试图弄清楚如何使用ng-click让我的"activeQuestion"只显示每个问题的一个项目。

我可以使用ng repeat来显示所有项目。这是获取json并将其传递给控制器的最佳方式吗？正如我看到的很多例子一样，在控制器中获取json。感谢您的帮助。

service.module.js

angular.module('services', [])
.service('getQuestion', ['$http', '$q', function($http, $q){
    var question = this;
    question.questionList = {};
    question.viewAll = function() {
        var defer = $q.defer();
        $http.get('/data/data.json')
        .success(function(res){
            question.questionList = res;
            defer.resolve(res);
        })
        .error(function(err){
            defer.reject(err);
        })
        return defer.promise;
    }
    return question;
}]);

控制器.js

 angular.module('app.question')
.controller('QuestionController', ['$scope', '$log','getQuestion',
function ($scope, $log, getQuestion) {
        var vm = this;
        vm.activeQuestion = 0;
        vm.init = function() {
            vm.getAll();
        }
        vm.getAll = function() {
            getQuestion.viewAll()
            .then(function(data){
            // success
            $log.log(data);
            vm.questionList = getQuestion.questionList;
        }, function (){
            // error
        })
        }
        vm.init();
        // Goes to the next question
        vm.next = function () {
            return vm.activeQuestion +=1;
        }
    }]);

data.json

    [
    {
      "sectionTitle": "",
      "title": "Select each of the following that apply to you"
    },
    {
      "sectionTitle": "Income",
      "title": "Enter any income you get. Leave them blank if they don't apply to you."
    },
    {
      "sectionTitle": "Savings",
      "title": "If you regularly put money into a pension, savings or investments, enter the amount here."
    }
]

html

    <div class="main-content__right" ng-controller="QuestionController">
      <div class="question" ng-repeat="element in question.questionList track by $index" ng-show="$index == activeQuestion">
        <div class="cabtool">
          <h2 style="margin-top: 0;">{{$index}} {{element.sectionTitle}}</h2>
          <p>{{element.title}}</p>
    </div>
    </div>
<button type="button" class="btn btn-primary right-button-icon" style="float:none" ng-click="next()">Next</button>
    </div>

每次我得到一个项目列表，但一次只想显示其中一个项目时，我都会使用2个范围变量，并使用相等的指针。

控制器示例：

angular.module('appName').controller('MyCtrl', function ($scope) {
    // Initialize scope variables for list and current item.
    $scope.questionList = [];
    $scope.currentQuestion = null;
    $scope.load = function () {
        $scope.questionList = questionList; // Wherever this may come from.
        $scope.currentQuestion = questionList[0]; // Setup the first element.
    };
    /**
     * Registered on the ng-click binding for example.
     */
    $scope.next = function () {
        var index;
        index = $scope.questionList.indexOf($scope.currentQuestion);
        index += 1; // Forward to next element.
        if ($scope.questionList[index]) {
            $scope.currentQuestion = $scope.questionList[index];
        }
        else {
            // Finished, advance to the next page or something.
        }
    }
    $scope.load();
});

现在，您可以使用当前问题元素来显示您的问题，并且列表仅用作"隐藏的背景数据"。