如何使用 ng-repeat 基于按钮单击循环答案

【问题标题】：How to loop based on button click using ng-repeat如何使用 ng-repeat 基于按钮单击循环
【发布时间】：2017-11-13 18:11:41
【问题描述】：

下面的代码一次显示所有问题和选择，但我希望它显示 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>

【问题讨论】：

标签： angular angularjs-ng-repeat angularjs-ng-click

【解决方案1】：

您可以使用 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>

【讨论】：