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

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

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" 
    } 
    ]; 
}]);

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

任何帮助将不胜感激。

Thx！

来源

2017-08-03 user1499369

一个不需要太多代码更改的简单解决方案就是在'ng-repeat'中显示另一个数组。这个第二个数组在开始时将被前四个元素填充，并且您可以在'ng-click'中分配函数，以便添加和移除此数组上的元素，并使用整个数组中的值填充它。编辑：因为角1.4，似乎你也可以使用开始值'limitTo：length：start' – Kaddath

你是否在寻找类似https://plnkr.co/edit/hAE6o0rUx0Jzm4MmRzLZ?p=preview或者你想要它圆？ – Vivz

我认为你正在寻找类似下面的解决方案：

// 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; 
 
     
 
    } 
 
}]);

<!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"> 
 
\t \t \t \t <ul class="team-members list-inline text-center" style="display:flex" > 
 
\t \t \t \t \t <li ng-repeat="player in players | limitTo: 4" style="padding:10px"> 
 
\t \t \t \t \t \t <div class="img-holder"> 
 
\t \t \t \t \t \t \t <a href="/player/{{ players[$index+size].name }}"><img ng-src="{{ players[$index+val].image }}" alt="{{players[$index+val].name}}" width="20px"></a> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <strong class="name">{{ players[$index+size].name }}</strong> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t <a href="#" class="btn-prev" ng-click="prev()">Prev</a> 
 
\t \t \t \t <a href="#" class="btn-next"ng-click="next()">Next</a> 
 
\t \t </div> 
 
</div> 
 
    </body> 
 
</html>

来源

2017-08-03 11:01:26 CIPHER007

它的工作！谢谢！ – user1499369

您可以通过NG-如果使用的是$ index.Just去处理分页通过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; 
    }

来源

2017-08-03 11:11:14 jesusverma

谢谢，但我试图一个接一个地移动，而不是4乘4。 – user1499369

@ user1499369更新了代码。请再次看到猛击者 – jesusverma

thx，但我不想看到任何物品消失。我总是想要4个项目在视图中，但一个接一个迭代。不管怎么说，还是要谢谢你！ – user1499369

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

回答

相关问题