javascript - AngularJS 1.x 在 ng-repeat 中一次显示一项，单击下一步应显示下一项，依此类推

Question

我正在开发一个测验 Web 应用程序，我必须在 3 个不同的选项卡(数学、GK、英语)中总共显示 100 个问题，这些问题是使用 Angular 过滤器进行过滤的。但每个选项卡都一次性显示所有问题(下一个/上一个按钮无法正常工作)，我尝试使用此处提供的各种解决方案，但它们也不起作用。 应用程序的另一部分显示所有 100 个问题按钮(在问题 div 的右侧)，用户可以导航到任何问题号。单击该按钮。

Angular 代码片段:

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--;
    }
};
}]);

2 个选项卡的 HTML 代码片段-

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

索引明智按钮----

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

感谢任何帮助。提前致谢。

Answer 1

刚刚修改了@tanmay的答案。将新记录附加到最后一条记录。

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>