Question

我已经收到了我在JSON文件中的所有问题，但我只需要一个，直到用户点击正确的答案并转到下一个

HTML模板：

<div ng-controller="quizController">
<ul>
    <li ng-repeat="q in allData">
        <h1 id="question">{{q.question}}</h1>
    </li>
</ul>


<div class="answers">
    <a class="btn btn-primary"><p>New York</p></a>
    <a class="btn btn-warning"><p>Miami</p></a>
    <a class="btn btn-success"><p>Washington</p></a>
    <a class="btn btn-danger"><p>LA</p></a>
</div>

JS：

app.controller("quizController", function($scope, $http){
$http.get("questions.json")
    .then(function(response){
        $scope.allData = response.data;
    });
});

JSON文件：

[
  {
    "question": "Which is the largest country in the world by population?",
    "options": ["India", "USA", "China", "Russia"],
    "answer": 2
  },
  {
    "question": "When did the second world war end?",
    "options": ["1945", "1939", "1944", "1942"],
    "answer": 0
  },
  {
    "question": "Which was the first country to issue paper currency?",
    "options": ["USA", "France", "Italy", "China"],
    "answer": 3
  },
  {
    "question": "Which city hosted the 1996 Summer Olympics?",
    "options": ["Atlanta", "Sydney", "Athens", "Beijing"],
    "answer": 0
  }
]

Answer 1

您不应该使用ng-repeat，因为这只会循环显示您的问题并在UI中一次显示所有问题。

相反，将您的问题数组存储在另一个变量中，然后将UI绑定到该变量的特定索引。

app.controller("quizController", function($scope, $http){

$scope.allData = [];
//Initially set to first element (question), then you will need to increment in further logic elsewhere probably on a button click handler if the answer is correct    
$scope.currentQuestion =  $scope.allData[0];

$http.get("questions.json")
    .then(function(response){
        $scope.allData = response.data;
    });
});

Answer 2

这与mindparses方法类似，但更深入一些。您可以来回导航。它不是完整的证明，但应该帮助你。

<强> HTML

<div ng-app="app" ng-controller="quizController">
    <div ng-app="app" ng-controller="quizController">
        <p>
            <h1 id="question">{{currentQ.question}}</h1>
            <div class="answers">
                <ul ng-repeat="option in currentQ.options">
                    <li>{{option}}</li>
                </ul>
            </div>
        </p>
        <button ng-click="move(-1)">Previous</button>
        <button ng-click="move(1)">Next</button>
    </div>
</div>

<强> JS / CONTROLLER

var app = angular.module('app', []);

app.controller("quizController", function ($scope) {

    $scope.move = function (direction) {
        // you're gonna need an IF block here to stop it from going out of range.
        var position = $scope.allData.indexOf($scope.currentQ);
        $scope.currentQ = $scope.allData[position + direction];
    }

    $http.get("questions.json").then(function(response){
        $scope.allData = response.data;
        $scope.currentQ = $scope.allData[0];
    });    
});

<强> JSFIDDLE

从JSON获取数据（AngularJS）

2 个答案: