使用$ 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(); 
}); 

現在你可以使用目前的問題元素，以顯示你的問題和清單僅用於爲「隱藏背景資料」。