2017-11-11 11 views
1

以下のコードは、一度にすべての質問と選択肢を表示しますが、次のボタンをクリックした後に次の質問を表示する必要があります。ng-repeatを使用してボタンクリックに基づいてループする方法

<div ng-repeat="questionData in questionDatas"> 
    <h4 ng-bind="questionData.question"></h4> 
    <div ng-repeat="choice in questionData.choices"> 
     <div class="choice"><input ng-bind="choice" type="radio" ng-value="option" name="option"><label ng-bind="choice"></label></div> 
    </div> 
    <button ng-click="nextQuestion">Next</button> 
</div> 

答えて

1

あなたはng-show

<ul ng-repeat="item in questions track by $index" 
      ng-show="(($index < (page * numRecords)) && ($index >= ((page - 1) * numRecords)))"> 
     <li>{{ item }}</li> 
</ul> 

DEMO

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

 
app.controller('ctrlIndex', function($scope){ 
 

 
    
 
    $scope.numRecords = 1; 
 
    $scope.page = 1; 
 

 
    $scope.questions = [] 
 
    for (var i = 0; i < 10; ++i) { 
 
     $scope.questions.push('question : ' + i); 
 
    } 
 

 
    $scope.next = function(){ 
 
     $scope.page = $scope.page + 1; 
 
    }; 
 

 
    $scope.back = function(){ 
 
     $scope.page = $scope.page - 1; 
 
    }; 
 
});
<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 

 
    <body ng-app="app"> 
 
    <div ng-controller="ctrlIndex"> 
 
     <ul ng-repeat="item in questions track by $index" 
 
      ng-show="(($index < (page * numRecords)) && ($index >= ((page - 1) * numRecords)))"> 
 
     <li>{{ item }}</li> 
 
     </ul> 
 
    
 
    <div><button ng-click="next()">Next </button></div> 
 
    <div><button ng-click="back()">Prev</button></div> 
 
    </div> 
 
</body> 
 

 
</html>

を使用することによって、これを達成することができます
関連する問題