Question

我想创建一个多项目滑块，使用ng-repeat（Angular 1.6）列出一些玩家。我想在ul＆gt; lis中添加prev / next按钮来访问数组中的下一个或上一个播放器，逐项移动视图。

---- HTML的 sliderdemo.html

<div ng-controller="SliderDemoCtrl">
   <div class="champions-slider">
            <ul class="team-members list-inline text-center" style="display:flex" >
                <li ng-repeat="player in players | limitTo: 4" style="padding:10px"> 
                    <div class="img-holder">
                        <a href="/player/{{ player.name }}"><img ng-src="{{ player.image }}" alt="{{player.name}}" width="20px"></a>
                    </div>
                    <strong class="name">{{ player.name }}</strong>
                </li>
            </ul>
            <a href="#" class="btn-prev" ng-click="?????">Prev</a>
            <a href="#" class="btn-next"ng-click="?????">Next</a>
    </div>
</div>

我的控制器js --- slider.demo.controller.js

 var myApp = angular.module('slider.demo', []);
 myApp.controller('SliderDemoCtrl',['$scope',function($scope){
 $scope.players = [
   {
    image:"http://placehold.it/500/e499e4/fff&amp;text=1",
    name: "tes 1"
   },
   {
    image:"http://placehold.it/500/e499e4/fff&amp;text=2",
    name: "tes 2"
   },
   {
    image: "http://placehold.it/500/e499e4/fff&amp;text=3",
    name: "tes 3"
   },
   {
    image:"http://placehold.it/500/e499e4/fff&amp;text=4",
    name: "tes 4"
   },
   {
    image:"http://placehold.it/500/e499e4/fff&amp;text=5",
    name: "tes 5"
   },
   {
    image: "http://placehold.it/500/e499e4/fff&amp;text=3",
    name: "tes 6"
   }
  ];
}]);

以下是问题的一个问题：https://plnkr.co/edit/J7dxeMfM22ju5gpZl5ri?p=preview

非常感谢任何帮助。

THX！

Answer 1

我认为你正在寻找以下解决方案：

＆＃13;

// Code goes here

var myApp = angular.module('slider.demo', []);
myApp.controller('SliderDemoCtrl',['$scope',function($scope){
    $scope.players = [
      {
        image:"http://placehold.it/500/e499e4/fff&amp;text=1",
        name: "tes 1"
      },
      {
        image:"http://placehold.it/500/e499e4/fff&amp;text=2",
        name: "tes 2"
      },
      {
        image: "http://placehold.it/500/e499e4/fff&amp;text=3",
        name: "tes 3"
      },
      {
        image:"http://placehold.it/500/e499e4/fff&amp;text=4",
        name: "tes 4"
      },
      {
        image:"http://placehold.it/500/e499e4/fff&amp;text=5",
        name: "tes 5"
      },
      {
        image: "http://placehold.it/500/e499e4/fff&amp;text=3",
        name: "tes 6"
      },
    ];
    $scope.size=0;
    $scope.next=function(){
      if($scope.size+4==$scope.players.length)
        return;
       $scope.size+=1;
      
    }
    $scope.prev=function(){
      if($scope.size==0)
       $scope.size=0;
      else 
       $scope.size-=1;
      
    }
}]);

＆＃13;

<!doctype html>
<html ng-app="slider.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="script.js"></script>
  </head>
  <body>

<div ng-controller="SliderDemoCtrl">
  <div class="champions-slider">
				<ul class="team-members list-inline text-center" style="display:flex" >
					<li ng-repeat="player in players | limitTo: 4" style="padding:10px"> 
						<div class="img-holder">
							<a href="/player/{{ players[$index+size].name }}"><img ng-src="{{ players[$index+val].image }}" alt="{{players[$index+val].name}}" width="20px"></a>
						</div>
						<strong class="name">{{ players[$index+size].name }}</strong>
					</li>
				</ul>
				<a href="#" class="btn-prev" ng-click="prev()">Prev</a>
				<a href="#" class="btn-next"ng-click="next()">Next</a>
		</div>
</div>
  </body>
</html>

＆＃13;

Answer 2

你可以通过ng-if使用$ index来处理分页。只需通过Plunker

    $scope.pre = 0;
    $scope.nex = 4;

    $scope.nextItem  = function(){
      $scope.pre = $scope.nex;
      $scope.nex = $scope.nex + 4;
    }

    $scope.prevItem  = function(){
      $scope.nex = $scope.pre
      $scope.pre = $scope.pre - 4;
    }

在AngularJS中添加多个项目数组中的上一个/下一个按钮（ngRepeat）

2 个答案: