如何使用javascript單擊向下箭頭時滾動頁面？

Question

一個數組有17個項目，我正在開發一個功能，當頁面被加載時需要顯示數組的前5個項目，然後如果我們點擊向下箭頭，那麼接下來的5個項目需要顯示，然後爲另一次點擊需要顯示剩餘的項目，也類似於向上的箭頭。我如何通過只使用javascript或angularjs來實現這一點。以下是我試過的代碼。

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>

你可以做這樣的事情，與limitTo，角1.4+需要