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

Question

我正在构建一个问卷调查表，试图弄清楚如何使我的“ activeQuestion”仅使用ng-click为每个问题显示一个项目。

我可以使用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;
}]);

controller.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>

Answer 1

每次获得项目列表，但一次只想显示其中一个项目时，我使用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();
});

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