2016-05-20 16 views
0

私は単純な状況で、配列の中にたくさんのデータが格納されています。 次の/ prevボタンがクリックされたときに、htmlビューで配列を1つずつ表示したいとします。角度:1つずつ配列に格納されたデータ項目を表示

私はこれに続く:しかし、私のコードは動作していないようHow to show item from json Array one by one in Angular JS

を。

コード:私が間違っているのは何

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

/** 
* 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では、これを使用していますか?

+0

NG-資源すべきですか?私はタグで宣言されたng-app = "solver"を持っています。 – Priyabrata

答えて

0

は、私が見つけた ミス:

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){ 
関連する問題