Question

我从服务器获得了超过100个div容器响应。像这样的演示代码，

＆＃13;

.container {
   border: 2px solid green;
    padding: 20px;
    display : flex;
}

.container > div {
    border: 1px solid black;
    background: #ececec;
    padding: 10px;
    margin-left: 10px;
    flex: 1;
}

＆＃13;

<div class="container">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
    <ul class="pagination" style="margin: 5px 0;">
    <li class="page-item" style="margin-left:0px !important;background:#C2252F"><input style="background:#C2252F;border-color:#C2252F" type="submit" class="btn btn-info" value="Previous"></li>
  </ul>
<ul class="pagination" style="margin: 5px 0;float:right">
    <li class="page-item" style="margin-left:0px !important;background:#C2252F"><input style="background:#C2252F;border-color:#C2252F" type="submit" class="btn btn-info" value="Next"></li>
  </ul>
</div>

＆＃13;

这是Respose我将从服务器获取它。像这样，100多个容器将逐一出现。但， 1）我想每页只显示一个div。我有一个next和prev按钮。如果我单击下一步，它应显示第二个DIV容器。

Answer 1

您可以使用一个类或属性来控制是否显示div。

解决方案（基于ClassName）：

.container > div

，除了其中一个类名称为'show'外，显示无

预

下一步

，从当前div中删除类名='显示'，然后为上一个/下一个添加类名='显示'格。

代码如下：

var GSlideId = 0;
//init to show first div
document.querySelectorAll('.container div')[GSlideId].className += ' showed';

function preSlide(){
  showSlide(-1);
}

function nextSlide(){
  showSlide(1);
}

function showSlide(interval=1){
  divs = document.querySelectorAll('.container > div');
  if(GSlideId+interval < 0){
    return; //do nothing or popup warning
  }
  if(GSlideId+interval > divs.length-1){
    return; //do nothing or popup warning
  }
  divs[GSlideId].className = divs[GSlideId].className.replace(/showed/g,'');
  GSlideId +=interval;
  divs[GSlideId].className += ' showed'
}

.container {
   border: 2px solid green;
    padding: 20px;
    display : flex;
}

.container > div {
    display:none;
    border: 1px solid black;
    background: #ececec;
    padding: 10px;
    margin-left: 10px;
    flex: 1;
}

.container > div.showed{
    display:block;
    border: 1px solid black;
    background: #ececec;
    padding: 10px;
    margin-left: 10px;
    flex: 1;
}

<div class="container">
    <div class="showed">Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
    <ul class="pagination" style="margin: 5px 0;">
    <li class="page-item" style="margin-left:0px !important;background:#C2252F"><input style="background:#C2252F;border-color:#C2252F" type="button" class="btn btn-info" value="Previous" onclick="preSlide()"></li>
  </ul>
<ul class="pagination" style="margin: 5px 0;float:right">
    <li class="page-item" style="margin-left:0px !important;background:#C2252F"><input style="background:#C2252F;border-color:#C2252F" type="button" class="btn btn-info" value="Next" onclick="nextSlide()"></li>
  </ul>
</div>

Answer 2

一种选择是将divs html存储在一个数组中。然后在ng-repeat中使用ng-html-bind来显示内容。

这是一个有效的例子

angular.module('app',['ngSanitize']).controller('divCtrl', function($scope){
$scope.displayNumberOfDivs = 4;
  $scope.divs = [
  {'key':1, 'content': '<h3>div 1</h3>'},
  {'key':2, 'content': '<h3>div 2</h3>'},
  {'key':3, 'content': '<h3>div 3</h3>'},
  {'key':4, 'content': '<h3>div 4</h3>'},
  {'key':5, 'content': '<h3>div 5</h3>'},
  {'key':6, 'content': '<h3>div 6</h3>'},
  {'key':7, 'content': '<h3>div 7</h3>'},
  {'key':8, 'content': '<h3>div 8</h3>'},
  {'key':9, 'content': '<h3>div 9</h3>'},
  {'key':10, 'content': '<h3>div 10</h3>'},
  ];
  $scope.selectedDivs = [];
  $scope.selectedIndex = 0;
  $scope.setDivs = function(){  
  if($scope.selectedIndex + $scope.displayNumberOfDivs < $scope.divs.length + 1){
  $scope.selectedDivs= [];
    for(var i = $scope.selectedIndex;i<$scope.selectedIndex + $scope.displayNumberOfDivs;i++){
    $scope.selectedDivs.push($scope.divs[i]);
    }
    }
  };
  $scope.toggleDivs = function(direction){
  
    if(direction == 'Next'){
      if($scope.selectedIndex < ($scope.divs.length + -$scope.displayNumberOfDivs)){
        $scope.selectedIndex++;
      }
    }else{
      if(($scope.selectedIndex - 1) >= 0){
        $scope.selectedIndex--;
      }
    }
    $scope.setDivs();
  };
  $scope.setDivs();
});

.container {
   border: 2px solid green;
    padding: 20px;
    display : flex;
}

.container > div {
    border: 1px solid black;
    background: #ececec;
    padding: 10px;
    margin-left: 10px;
    flex: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.3.15/angular-sanitize.js"></script>

<div class="container" ng-app="app" ng-controller="divCtrl">
    <div ng-repeat="div in selectedDivs" ng-bind-html="div.content"></div>
    <ul class="pagination" style="margin: 5px 0;">
    <li class="page-item" style="margin-left:0px !important;background:#C2252F"><input style="background:#C2252F;border-color:#C2252F" type="submit" class="btn btn-info" value="Previous" ng-click="toggleDivs('Previous')"></li>
  </ul>
<ul class="pagination" style="margin: 5px 0;float:right">
    <li class="page-item" style="margin-left:0px !important;background:#C2252F"><input style="background:#C2252F;border-color:#C2252F" type="submit" class="btn btn-info" value="Next" ng-click="toggleDivs('Next')"></li>
    
  </ul>
  
</div>

如何逐个展示Div Container？

2 个答案: