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

时间:2017-11-11 18:41:17

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

以下代码一次显示所有问题和选项,但我希望它显示1个问题及其特定选项,点击下一个按钮后,它应显示下一个问题。

launchMsTestAndWaitForDebugger.bat

1 个答案:

答案 0 :(得分:0)

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