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
我正在开发一个测验 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>
感谢任何帮助。提前致谢。
你可以用这样的东西。它根据 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>
刚刚修改了@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>
我正在开发一个测验 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>
感谢任何帮助。提前致谢。
你可以用这样的东西。它根据 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>
刚刚修改了@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>