Question

我是一个简单的情况，我在一个阵列中存储了大量数据。我想在单击下一个/上一个按钮的时候逐个显示html视图中的数组。

我遵循了这个：How to show item from json Array one by one in Angular JS

但是，我的代码似乎无法运作。

代码：

/**
 * Created by PBC on 5/21/2016.
 */
var solver = angular.module('solver', []);
solver.controller('data', data);

function data($scope, $http){

    $scope.Type = "";
    $scope.qlist = [];
    $scope.alist = [];
    $scope.idx = 0;
    $scope.ans = "";
    $scope.q = "";

    var config = {
        headers : {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
        }
    };

    var data = $.param({
        _Down_Questions:localStorage.getItem('prb')
    });


    $http.post("../Php/download_questions.php", data, config).then
    (
        //Success Callback
        function (res) {
            $scope.Type = res.data.Type;
            if ($scope.Type == 'Objective'){
                for(var i = 0; i < res.data.Data.length; i++){
                    var data = {Q:res.data.Data[i]["Q"], A:res.data.Data[i]["A"]};
                    $scope.qlist[i] = data;
                }
            }
            else{
                for(var i = 0; i < res.data.Data.length; i++){
                    var data = {Q:res.data.Data[i]["Q"], A:res.data.Data[i]["A"], O:res.data.Data[i]["O"]};
                    $scope.qlist.push[i] = data;
                }
            }
        },
        //Error Callback
        function () {
            $scope.registrationResponse = "";
            swal("Request couldn't be sent!", "", "error");
        }
    );

    $scope.next = function () {
        if ($scope.idx < res.data.Data.length){
            $scope.alist[$scope.idx] = $scope.ans;
            $scope.idx += 1;
            $scope.ans = null;
        }
    };

    $scope.prev = function () {
        if ($scope.idx > 0){
            $scope.idx -= 1;
            ans = $scope.alist[$scope.idx];
        }
    };
}

使用这个，在html中：

<div data-ng-controller="data">
        <div style="display: table;margin: 0 auto; width: 30%">
            <div class="row container" style="margin-top: 50%">
                <div class="col l12" data-ng-repeat="q in qlist track by $index" data-ng-show="$index == idx">
                    {{q[idx]["Q"]}}
                </div>
                <input placeholder="Answer" data-ng-model="ans" type="text" class="validate center">
                <div class="row" style="display: table;margin: 0 auto; width: 100%">
                    <a class="waves-effect waves-light btn" data-ng-click="next()" style="display: table;margin: 0 auto; width: 50%">Next</a><br>
                    <a class="waves-effect waves-light btn" data-ng-click="prev()" style="display: table;margin: 0 auto; width: 50%">Previous</a>
                </div>
            </div>
        </div>
    </div>

我做错了什么？

Answer 1

我发现了错误：

1）

{{q[idx]["Q"]}}

应该是

{{q["Q"]}}

2）

$scope.next = function () {
        if ($scope.idx < res.data.Data.length){
            $scope.alist[$scope.idx] = $scope.ans;
            $scope.idx += 1;
            $scope.ans = null;
        }
    };

这里的情况是错误的：

它应该是，

if ($scope.idx < $scope.qlist.length){

Angular：逐个显示存储在数组中的数据项

1 个答案: