AnglesJS（ngRepeat）の複数の項目にPrev/Nextボタンを追加

ng-repeat（Angular 1.6）を使っていくつかのプレイヤーをリストするために、複数項目のスライダーを作成したいと思います。 ul> lisにprev/nextボタンを追加して、配列内の次のプレイヤーまたは前のプレイヤーにアクセスし、ビューアイテムを項目ごとにシフトしたいとします。AnglesJS（ngRepeat）の複数の項目に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" 
    } 
    ]; 
}]);

は質問のplunkrです：https://plnkr.co/edit/J7dxeMfM22ju5gpZl5ri?p=preview

ご協力いただければ幸いです。

Thx！

出典

2017-08-03 user1499369

を通過する場合はNG-あなたがで改ページを処理することができます多すぎるコード変更を必要としない簡単な解決策は、 'ng-repeat'に別の配列を表示することです。この2番目の配列は、最初の4つの要素で始まり、 '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

$ 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

ありがとうございますが、私は1つずつ移動しようとしています。 – user1499369

@ user1499369はコードを更新しました。親切に再びplunkerを参照してください – jesusverma

しかし、私はどの項目が消えて見たいと思っていません。私は4つのアイテムを常にビューに入れたいが、1つずつ繰り返す。とにかくありがとう！ – user1499369

AnglesJS（ngRepeat）の複数の項目にPrev/Nextボタンを追加

答えて

関連する問題