Question

嘿我有一个问题关于在分页中使用切片和关于角度的索引复选框，所以在下面提到的代码中我可以创建新的问题点击并创建有问题的新chceckbox（例如简单的测验创建问题和下一个创建布尔答案）。我的问题是当我创建两个以上的问题（分页中的一个页面中的两个问题）并在复选框中检查答案并转到下一页并返回第一页我的答案（选中复选框清除）。我的问题是如何记住在分页中浏览页面的选中复选框？我想如果我使用索引一切都会正常，但不是。

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

a:hover
{
  cursor: pointer
  
}
a 
{ 
  display: block
}

<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 + (currentPage-1)*itemsPerPage}}</h3></label>                      
   <input type="checkbox" ng-model="input[$index + (currentPage-1)*itemsPerPage][0]" class="form-control">
   <div class="input-group-addon add-field-answer">
     <a ng-click="addAnswer(question)" title="Dodaj nową odpowiedź">
      <i class="fa fa-plus"></i>
     </a>                       
   </div> 
   <div ng-repeat="answer in question.answers track by $index">
       <input type="checkbox" ng-model="input[$parent.$index + (currentPage-1)*itemsPerPage][$index + 1]" class="form-control">
   </div>
 </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>

Answer 1

我解决了问题，我应该在控制器$scope.input={}中创建空对象并与mgModal

连接

使用角度分页记住切片功能中的复选框

1 个答案: