我想创建一个多项目 slider 来列出一些使用 ng-repeat (Angular 1.6) 的玩家。我想在 ul>lis 中添加上一个/下一个按钮来访问数组中的下一个或上一个播放器，逐项移动 View 。
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>
我的 Controller 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&text=1",
name: "tes 1"
},
{
image:"http://placehold.it/500/e499e4/fff&text=2",
name: "tes 2"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 3"
},
{
image:"http://placehold.it/500/e499e4/fff&text=4",
name: "tes 4"
},
{
image:"http://placehold.it/500/e499e4/fff&text=5",
name: "tes 5"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 6"
}
];
}]);
以下是问题的概要:https://plnkr.co/edit/J7dxeMfM22ju5gpZl5ri?p=preview
任何帮助将不胜感激。
谢谢!
最佳答案
我认为您正在搜索如下解决方案:
// Code goes here
var myApp = angular.module('slider.demo', []);
myApp.controller('SliderDemoCtrl',['$scope',function($scope){
$scope.players = [
{
image:"http://placehold.it/500/e499e4/fff&text=1",
name: "tes 1"
},
{
image:"http://placehold.it/500/e499e4/fff&text=2",
name: "tes 2"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 3"
},
{
image:"http://placehold.it/500/e499e4/fff&text=4",
name: "tes 4"
},
{
image:"http://placehold.it/500/e499e4/fff&text=5",
name: "tes 5"
},
{
image: "http://placehold.it/500/e499e4/fff&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">
<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>关于javascript - 在 AngularJS (ngRepeat) 的多个项目数组中添加上一个/下一个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45481302/