Wie scrollt man die Seite, wenn man mit Javascript auf den Pfeil nach unten klickt?

Question

Ein Array hat 17 Elemente und ich arbeite an einer Funktionalität, die die ersten 5 Elemente eines Arrays anzeigen muss, wenn die Seite geladen wird. Wenn wir dann auf den Abwärtspfeil klicken, müssen die nächsten 5 Elemente angezeigt werden Ein weiterer Klick muss die restlichen Elemente anzeigen und ähnlich dem Pfeil nach oben. Wie kann ich dies erreichen, indem ich nur javascript oder angularjs benutze? Im Folgenden ist der Code, für den ich es versucht habe.

var vm = this; 
 

 
vm.dataoptions = [ 
 
       {title: 'data1', state: 'app.data1'}, 
 
       {title: 'data2', state: 'app.data2'}, 
 
       {title: 'data3', state: 'app.data3'}, 
 
       {title: 'data4', state: 'app.data4'}, 
 
       {title: 'data5', state: 'app.data5'}, 
 
       {title: 'data6', state: 'app.data6'}, 
 
       {title: 'data7', state: 'app.data7'}, 
 
       {title: 'data8', state: 'app.data8'}, 
 
       {title: 'data9', state: 'app.data9'}, 
 
       {title: 'data10', state: 'app.data10'}, 
 
       {title: 'data11', state: 'app.data11'}, 
 
       {title: 'data12', state: 'app.data12'}, 
 
       {title: 'data13', state: 'app.data13'}, 
 
       {title: 'data14', state: 'app.data14'}, 
 
       {title: 'data15', state: 'app.data15'}, 
 
       {title: 'data16', state: 'app.data16'}, 
 
       {title: 'data17', state: 'app.data17'}, 
 
      ];

<div class="data-list"> 
 
    <ul> 
 
     <li ng-repeat="data in vm.dataoptions"> 
 
      <a ui-sref="{{data.state}}"> 
 
       {{data.title}}     
 
      </a> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<div class="data-buttons"> 
 
<button><i class="fa fa-chevron-up" ng-click="up()"></i></button> 
 
<button><i class="fa fa-chevron-down" ng-click="down()"></i></button> 
 
</div>

Answer 1

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('ctrl', ['$scope', function($scope) { 
 
$scope.begin = 0; 
 

 
$scope.dataoptions = [ 
 
       {title: 'data1', state: 'app.data1'}, 
 
       {title: 'data2', state: 'app.data2'}, 
 
       {title: 'data3', state: 'app.data3'}, 
 
       {title: 'data4', state: 'app.data4'}, 
 
       {title: 'data5', state: 'app.data5'}, 
 
       {title: 'data6', state: 'app.data6'}, 
 
       {title: 'data7', state: 'app.data7'}, 
 
       {title: 'data8', state: 'app.data8'}, 
 
       {title: 'data9', state: 'app.data9'}, 
 
       {title: 'data10', state: 'app.data10'}, 
 
       {title: 'data11', state: 'app.data11'}, 
 
       {title: 'data12', state: 'app.data12'}, 
 
       {title: 'data13', state: 'app.data13'}, 
 
       {title: 'data14', state: 'app.data14'}, 
 
       {title: 'data15', state: 'app.data15'}, 
 
       {title: 'data16', state: 'app.data16'}, 
 
       {title: 'data17', state: 'app.data17'}, 
 
      ]; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="ctrl"> 
 
    <div class="data-list"> 
 
     <ul> 
 
      <li ng-repeat="data in dataoptions | limitTo:5:begin"> 
 
       <a ui-sref="{{data.state}}"> 
 
        {{data.title}}     
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <div class="data-buttons"> 
 
    {{begin}} 
 
    <button ng-show="begin>0" ng-click="begin = begin - 5"><i class="fa fa-chevron-down" ></i><</button> 
 
    <button ng-show="begin<dataoptions.length" ng-click="begin= begin +5"><i class="fa fa-chevron-up" ></i>></button> 
 
    
 
    </div> 
 
</div>

man so etwas tun kann, mit LimitTo benötigte Winkel 1.4+