如何使用 ng-repeat 基于按钮单击进行循环
How to loop based on button click using ng-repeat
下面的代码一次显示所有问题和选项,但我希望它显示 1 个问题及其特定选项,在单击下一步按钮后它应该显示下一个问题。
<div ng-repeat="questionData in questionDatas">
<h4 ng-bind="questionData.question"></h4>
<div ng-repeat="choice in questionData.choices">
<div class="choice"><input ng-bind="choice" type="radio" ng-value="option" name="option"><label ng-bind="choice"></label></div>
</div>
<button ng-click="nextQuestion">Next</button>
</div>
您可以使用 ng-show
来实现
<ul ng-repeat="item in questions track by $index"
ng-show="(($index < (page * numRecords)) && ($index >= ((page - 1) * numRecords)))">
<li>{{ item }}</li>
</ul>
演示版
var app = angular.module('app', []);
app.controller('ctrlIndex', function($scope){
$scope.numRecords = 1;
$scope.page = 1;
$scope.questions = []
for (var i = 0; i < 10; ++i) {
$scope.questions.push('question : ' + i);
}
$scope.next = function(){
$scope.page = $scope.page + 1;
};
$scope.back = function(){
$scope.page = $scope.page - 1;
};
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="app">
<div ng-controller="ctrlIndex">
<ul ng-repeat="item in questions track by $index"
ng-show="(($index < (page * numRecords)) && ($index >= ((page - 1) * numRecords)))">
<li>{{ item }}</li>
</ul>
<div><button ng-click="next()">Next </button></div>
<div><button ng-click="back()">Prev</button></div>
</div>
</body>
</html>
下面的代码一次显示所有问题和选项,但我希望它显示 1 个问题及其特定选项,在单击下一步按钮后它应该显示下一个问题。
<div ng-repeat="questionData in questionDatas">
<h4 ng-bind="questionData.question"></h4>
<div ng-repeat="choice in questionData.choices">
<div class="choice"><input ng-bind="choice" type="radio" ng-value="option" name="option"><label ng-bind="choice"></label></div>
</div>
<button ng-click="nextQuestion">Next</button>
</div>
您可以使用 ng-show
<ul ng-repeat="item in questions track by $index"
ng-show="(($index < (page * numRecords)) && ($index >= ((page - 1) * numRecords)))">
<li>{{ item }}</li>
</ul>
演示版
var app = angular.module('app', []);
app.controller('ctrlIndex', function($scope){
$scope.numRecords = 1;
$scope.page = 1;
$scope.questions = []
for (var i = 0; i < 10; ++i) {
$scope.questions.push('question : ' + i);
}
$scope.next = function(){
$scope.page = $scope.page + 1;
};
$scope.back = function(){
$scope.page = $scope.page - 1;
};
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="app">
<div ng-controller="ctrlIndex">
<ul ng-repeat="item in questions track by $index"
ng-show="(($index < (page * numRecords)) && ($index >= ((page - 1) * numRecords)))">
<li>{{ item }}</li>
</ul>
<div><button ng-click="next()">Next </button></div>
<div><button ng-click="back()">Prev</button></div>
</div>
</body>
</html>