如何按所需长度对数组元素进行“切片”并更新

Question

我有一个数组项目，我想通过3 显示项目3。为此，我正在切割物品。

当附加切片项目时，单击切片项目时，我想将该项目更新为heading 项目。

我有next 和prev 链接可供点击。 next 提供1 添加，previous 提供-1 减少长度。

我尝试了一些方法，但我无法找到正确的方法。有什么帮助我完成这项工作的吗？

我的代码：

<div ng-controller="main" class="content">
      <h1>{{heading}}</h1>
      <a ng-click="slide(-1)">Prev</a>
        <h2 ng-repeat="title in titles">{{title}}</h2>
      <a ng-click="slide(1)">Prev</a>
    </div>

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

myApp.controller("main", function($scope) {
  $scope.required = 3;
  $scope.items = [1,2,3,4,5,6,7,8,9,0];
  $scope.titles = $scope.items.slice(0,3);
  $scope.heading = $scope.titles[0];

  $scope.slide = function (num) {
    console.log(num);
  }

})

Live Demo

Answer 1

您的代码如下所示

标记

<div ng-controller="main" class="content">
  <h1>{{heading}}</h1>
  <a ng-click="prev(-1)">Prev</a>
    <h2 ng-repeat="title in titles">{{title}}</h2>
  <a ng-click="next(1)">Next</a>
</div>

控制器

myApp.controller("main", function($scope) {
  $scope.required = 3;
  $scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

  $scope.titles = angular.copy($scope.items).slice(0, 3);
  $scope.heading = $scope.titles[0];

  $scope.startIndex = 0;
  $scope.next = function(num) {
    if ($scope.startIndex < $scope.items.length) {
      $scope.startIndex = $scope.startIndex + 2;
      $scope.titles = Array.prototype.slice.call($scope.items, ++$scope.startIndex, $scope.startIndex + 3);
    }
  }

  $scope.prev = function(num) {
    if ($scope.startIndex > 0) {
      $scope.startIndex = $scope.startIndex - 2;
      $scope.titles = Array.prototype.slice.call($scope.items, --$scope.startIndex, $scope.startIndex + 3);

    }
  }

  $scope.updateHeading = function(item) {
    $scope.heading = item;
  }

})

Demo Plunkr