AngularJS: prev/next button
Change text by Prev/Next button.
by Diogo Soares
HTML
<section ng-controller="MyCtrl" class="tags">
<button ng-click="previous()" class="previous" ng-show="hasPreview"><</button>
<ul>
<li style="background: {{tag.color}}" ng-repeat="tag in tags | limitTo:limiteValor">{{ tag.name }}</li>
</ul>
<button ng-click="next()" class="next" ng-show="hasNext">></button>
</section>
CSS
ul li {
display:inline;
float: left;
}
.tags{
width:85%;
background: #ced4d9;
height: 20px;
}
.tags .previous{
float: left;
}
.tags .next{
float: right;
}
JavaScript
//Versão 1
angular.module("myApp", []).
controller("MyCtrl", function($scope) {
$scope.dataSet = [
{name:"Leiloado no leilão",index:0, color: 'red'},
{name:"Baixado",index:1, color: 'blue'},
{name:"Alienado pela financeira",index:2, color: 'purple'},
{name:"Operacional",index:3, color: 'green'},
{name:"Descarregado",index:4, color: 'yellow'},
{name:"Disponível",index:5, color: 'brown'},
{name:"Vendido por lote",index:6, color: 'pink'}
];
$scope.current = $scope.dataSet[0],
$scope.limiteValor = 3;
$scope.hasPreview = false;
$scope.hasNext = $scope.dataSet.length > $scope.limiteValor ? true : false;
$scope.tags = $scope.dataSet.slice(0, $scope.dataSet.length);
$scope.next = function(item){
var i = $scope.getIndex($scope.current.index, 1);
$scope.current = $scope.dataSet[i];
$scope.tags = $scope.dataSet.slice($scope.current.index, $scope.current.index + $scope.limiteValor);
$scope.hasPreview = i > 0 ? true : false;
$scope.hasNext = i === ($scope.dataSet.length -1) ? false : true;
},
$scope.previous = function(){
var i = $scope.getIndex($scope.current.index, -1);
$scope.current = $scope.dataSet[i];
$scope.tags = $scope.dataSet.slice($scope.current.index, $scope.current.index + $scope.limiteValor);
$scope.hasPreview = i > 0 ? true : false;
$scope.hasNext = i === ($scope.dataSet.length -1) ? false : true;
},
$scope.getIndex = function(currentIndex, shift){
var len = $scope.dataSet.length;
return (((currentIndex + shift) + len) % len)
}
});