Question

嘿，我有一个关于分页的问题。当我从数据库加载数据时，此代码非常有用，例如用户列表。但现在我想动态创建输入（用于测验问题）并在$index中使用ng-repeat。

然而，问题是：因为我在分页中使用slice，所以$index也会被切片。在我的示例中，页面上有两个项目，但如果您创建的项目超过两个，则会看到相同的数字 - ＆＃39;问题1＆＃39;和问题2＆＃39;在所有页面上。

如何在分页中正确设置$index？我希望第一页上的第1,2,3,4等等。

＆＃13;

angular.module('myApp', ['ui.bootstrap'])

.controller('myCtrl', function($scope){
  $scope.currentPage = 2;
  $scope.itemsPerPage = 2; 
  $scope.questionQuiz = [];
  $scope.addQuizQuestion = function(){
    $scope.questionQuiz.push({});
    $scope.totalItems = $scope.questionQuiz.length;
  }
})

＆＃13;

a:hover
{
  cursor: pointer
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<body ng-app="myApp" ng-controller="myCtrl">
  <a class="input-group-addon" ng-click="addQuizQuestion()">
    <i class="fa fa-plus"></i>&nbsp;Add question
  </a> 
  <div ng-repeat="question in questionQuiz.slice(((currentPage-1)*itemsPerPage), ((currentPage*itemsPerPage))) track by $index">
   <label><h3>Question {{$index + 1}}</h3></label>                      
   <input type="text" ng-model="input[$index]" class="form-control" placeholder="Write something...">
  </div> 
  <pagination total-items="totalItems" ng-model="currentPage" class="pagination-sm text-center" items-per-page="itemsPerPage" previous-text="Prev" next-text="Next">     </pagination>
</body>

＆＃13;

Answer 1

只需在索引编号之前添加项目数，如下所示：

<label><h3>Question {{$index + 1 + (currentPage - 1) * itemsPerPage}}</h3></label>

在分页角度中切片重复

1 个答案: