AngularJS 1.x Display one item at a time in ng-repeat, click on next should display next item and so on

Question

I am developing a quiz web application, where I have to show 100 question in total across 3 different tabs (Math, GK, English), the questions are getting filtered using angular filter. But each tabs are showing all questions in one go (next/previous button not working properly), i tried using various solution provided here but they didn't work either. The other part of app where all 100 question buttons are shown (in right side of question div) and the user can navigate to any question no. by clicking that button.

The snippet of angular code :

app.controller('examController',['$scope','$http', function ($scope,$http) {

$http.get('/static/exam-files/question').then(function (response) {
    $scope.questions = response.data;
    console.log($scope.questions);
    $scope.mode = "quiz";
})

$scope.qnIndex = 0;

$scope.next = function () {
    if ($scope.qnIndex >= $scope.questions.length - 1) {
        $scope.qnIndex = 0;
    } else {
        $scope.qnIndex++;
    }
};

$scope.previous = function () {
    if ($scope.qnIndex >= $scope.questions.length - 1) {
        $scope.qnIndex = 0;
    } else {
        $scope.qnIndex--;
    }
};
}]);

HTML code snippet for 2 tabs-

   <uib-tab index="0" heading="Verbal">
                <div class="tab-pane fade active in qnPadding" id="Verbal"  ng-repeat="question in questions | filter:{type:'verbal'}" ng-if="qnIndex == $index">
                    <div class="q-div q-height q-background">
                        <span>Q.No: <span class="q-num">
 {{question.questionId}}</span><p>{{question.questionDesc}}</p></span>
                    </div>


                    <div class="options well opt-background" style="margin: 10 10 15 15">
                        <!-- List group -->
                        <div class="radio" ng-repeat="radiobox in question.options">
                            <label>
                                <input type="radio" name="optionsRadios">
                                {{radiobox}}
                            </label>
                        </div>

                    </div>


                    <div>
                        <div class="btn-group " role="group" aria-label="...">
                            <button type="button" class="btn btn-default btn-pre" ng-disable="$index = 0" ng-click="previous()">Previous</button>
                            <button type="button" class="btn btn-default btn-next" ng-click="next()">Next</button>
                        </div>
                        <div class="btn-group pull-right q-background" role="group" aria-label="...">
                            <button type="button" class="btn btn-default btn-save">Mark</button>
                            <button type="button" class="btn btn-default btn-unsel">Un-Select</button>
                        </div>

                    </div>

                </div>

            </uib-tab>
            <uib-tab index="1" heading="Math">

                <div class="tab-pane active in qnPadding" id="Math" ng-repeat="question in questions | filter: { type: 'math' }" ng-if="qnIndex == $index">
                    <div class="options well" >
                        <div> <img src="">

                        <span>Q.No: <span class="q-num">{{question.questionId}}</span><p>{{question.questionDesc}}</p></span></div>
                        <div class="radio" ng-repeat="x in question.options">
                            <label >
                                <input type="radio" name="optionsRadiosm">
                                {{x}}
                            </label>
                        </div>
                    </div>


                    <div>
                        <div class="btn-group" role="group" aria-label="...">
                            <button type="button" class="btn btn-default" ng-click="previous()">Previous</button>

                            <button type="button" class="btn btn-default" ng-click="next()">Next</button>
                        </div>
                        <div class="btn-group pull-right" role="group" aria-label="...">
                            <button type="button" class="btn btn-default">Mark</button>
                            <button type="button" class="btn btn-default">Un-Select</button>
                        </div>

                    </div>

                </div>


            </uib-tab>

Index wise buttons ----

 <div class="col-md-3">
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading opt-background"> Welcome candidate</div>
            <div class="panel-body">
                <p>your {{Test}} has {{question.count}} question, click on any question no below to navigate
                </p>
                <div ng-repeat="question in questions">
                    <button type="button" class="btn btn-info btn-circle btn-lg" ng-click="goTo($index)">{{$index+1}}</button>

                </div>
            </div>


        </div>
    </div>

Any help is appreciated. Thanks in advance.

Answer 1

You can go with something like this. It displays one value at a time from ng-repeat based on the value of count which gets increased by clicking on the + button which gets hidden when we reach the end.

Also, note that, similarly, you can have a - button to go to previous value very easily.

Here's the snippet demonstrating this behavior:

var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
  $scope.myArray = [123, 3432, 4645, 7657, 4575646, 234, 43, 555]
  $scope.count = 0
  $scope.clicked = function() {
    $scope.count = $scope.count + 1
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <table>
      <tr ng-repeat="obj in myArray">
        <td ng-show="$index === count">{{obj}}</td>
        <td ng-show="$last && count !== myArray.length - 1">
          <button ng-click="clicked()">+</button>
        </td>
      </tr>
    </table>
  </div>
</body>