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+

使用javascript单击向下箭头时如何滚动页面？

1 个答案: