AngularJS 1.x 在 ng-repeat 中一次显示一个项目，点击下一步应该显示下一个项目等等

Question

我正在开发一个测验 Web 应用程序，我必须在 3 个不同的选项卡（数学、GK、英语）中显示总共 100 个问题，这些问题正在使用 angular 过滤器进行过滤。但是每个选项卡都一次性显示所有问题（next/previous 按钮无法正常工作），我尝试使用此处提供的各种解决方案，但它们也没有用。应用程序的另一部分显示了所有 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--;
    }
};
}]);

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

   <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

你可以用这样的东西。它根据 count 的值一次显示 ng-repeat 中的一个值，通过单击 + 按钮增加该值我们走到了尽头。

此外，请注意，类似地，您可以使用 - 按钮非常轻松地转到上一个值。

下面是演示此行为的代码段：

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>

Answer 2

刚刚修改了@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>

AngularJS 1.x 在 ng-repeat 中一次显示一个项目，点击下一步应该显示下一个项目等等

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

javascript

angularjs

html

angularjs-scope

angularjs-ng-repeat