JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div class="content" ng-app="myApp" ng-controller="c" 
ng-init="pageSize=5;page=0">

  <p class="t" ng-repeat="text in texts | startFrom : pageSize * page | limitTo : pageSize">
  {{text.con}}</p>
  
  <div class="paginationButtons">
    <img class="paginationButton basic-button" ng-click="page=0"/>
    <img class="paginationButton basic-button" ng-click="page=1"/>
  </div>
  

</div>

CSS

.paginationButtons
{
  text-align:right;
  padding-right:10px;
}

.paginationButton
{
  width:25px;
  height:25px;
  background:white;
}

.paginationButton:hover
{
  background:azure;
}

JavaScript

var mod = angular.module('myApp',[]);

mod.controller('c',function($scope){

	$scope.texts = [{con : 'hello', visible : true}, {con :'world',visible :false},{con : 'zetta', visible : true},{con:'alln'},{con:'mirm'},{con :'stro'},{con :'rho'}];

});

mod.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

function setVisibility(content)
{
	var stop = 5;
  
  if(content.length < 5)
  {
  	stop = content.length;
  }
  
  for(var t = 0; t < stop; t++)
  {
  	content[t].visible = true;
  }
  

}