我正在开发一个测验Web应用程序，我必须在3个不同的选项卡（数学，GK，英语）中共显示100个问题，问题将使用角度过滤器进行过滤。但是每个标签一次显示所有问题（下一个/上一个按钮不能正常工作），我尝试使用此处提供的各种解决方案，但他们也没有工作。 app的另一部分显示了所有100个问题按钮（在问题div的右侧），用户可以导航到任何问题no。点击该按钮。
角度代码片段：
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>
感谢任何帮助。提前谢谢。
答案 0 :(得分：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>
答案 1 :(得分：0)
你可以选择这样的东西。它会ng-repeat根据count的值一次显示一个值，点击 + 按钮，当我们到达结束。
此外，请注意，同样地，您可以使用 - 按钮轻松转到上一个值。
以下是展示此行为的摘录：
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>