<!DOCTYPE html>
<html ng-app="app">
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<link type="text/css" data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<body data-ng-controller="TestController as vm">
<button ng-click="vm.displayPreviousQuotes()">Previous</button>
<button ng-click="vm.displayNextQuotes()">Next</button>
<ul class="list-inline quotes">
<li ng-repeat="quote in vm.marketDisplayedQuotes | limitTo:3" class="{{vm.animationClass}} quotes quote-{{$index}}">
<span class="quote-name">{{quote.name}}</span>
<span class="quote-last">{{quote.last}}</span>
<span class="quote-change-percent {{quote.direction}}">{{quote.changePercent}}</span>
</li>
</ul>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1-rc2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular-animate.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
// Code goes here
var app = angular.module("app", ['ngAnimate']);
app.controller("TestController", function($scope) {
var vm = this;
vm.markeyArrayIndexPos = 0;
vm.marketDisplayedQuotes = [];
vm.dataQuotes = [
{
category: "INDICES",
name: "Nikkei",
last: "16,020",
changePercent: "+0.83%",
direction: "positive"
},
{
category: "INDICES",
name: "DAX",
last: "9,661.50",
changePercent: "+0.30%",
direction: "positive"
},
{
category: "INDICES",
name: "CAC",
last: "4,431.41",
changePercent: "+0.50%",
direction: "positive"
},
{
category: "INDICES",
name: "BSE Sensex",
last: "26,631.29",
changePercent: "-0.52%",
direction: "negative"
},
{
category: "INDICES",
name: "Nifty",
last: "7,975.50",
changePercent: "+0.54%",
direction: "positive"
},
{
category: "INDICES",
name: "Dow",
last: "17,265.99",
changePercent: "+0.64%",
direction: "positive"
},
{
category: "INDICES",
name: "S&P 500",
last: "2,011.36",
changePercent: "+0.49%",
direction: "positive"
},
{
category: "INDICES",
name: "Nasdaq",
last: "4,593.42",
changePercent: "+0.68%",
direction: "positive"
},
{
category: "INDICES",
name: "Hang Seng",
last: "24,254.95",
changePercent: "+0.36%",
direction: "positive"
},{
category: "INDICES",
name: "FTSE",
last: "6,819.29",
changePercent: "+0.57%",
direction: "positive"
}
];
vm.marketDisplayedQuotes = getArrayNextValues(vm.dataQuotes, 0, 5);
console.debug(vm.marketDisplayedQuotes);
// public function
vm.displayNextQuotes = displayNextQuotes;
vm.displayPreviousQuotes = displayPreviousQuotes;
return vm;
/** Get the next 5 quotes and animate */
function displayNextQuotes() {
vm.animationClass = 'animation-lr';
vm.markeyArrayIndexPos += 5;
vm.marketDisplayedQuotes = getArrayNextValues(vm.dataQuotes, vm.markeyArrayIndexPos, 5);
}
function displayPreviousQuotes() {
vm.animationClass = 'animation-lr';
vm.markeyArrayIndexPos -= 5;
vm.marketDisplayedQuotes = getArrayNextValues(vm.dataQuotes, vm.markeyArrayIndexPos, 5);
}
function getArrayNextValues(array, start, nb) {
var arrayTmp = [];
for(var i = 0; i < nb; i++) {
if(array[start]) {
arrayTmp[i] = array[start++];
}else {
break;
}
}
if(arrayTmp.length === 0) {
vm.markeyArrayIndexPos = 0;
return array;
}
return arrayTmp;
}
});
/* Left to Right */
.animation-lr.ng-enter {
-webkit-transition: 1s ease-out all;
-moz-transition: 1s ease-out all;
-o-transition: 1s ease-out all;
transition: 1s ease-out all;
-webkit-transform: translate(-100%,0);
-moz-transform: translate(-100%,0);
-o-transform: translate(-100%,0);
transform: translate(-100%,0);
}
.animation-lr.ng-leave {
-moz-transition: 0s ease-out all;
-webkit-transition: 0s ease-out all;
-o-transition: 0s ease-out all;
transition: 0s ease-out all;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.animation-lr.ng-enter.ng-enter-active {
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.animation-lr.ng-leave.ng-leave-active {
-webkit-transform: translate(100%,0);
-moz-transform: translate(100%,0);
-o-transform: translate(100%,0);
transform: translate(100%,0);
}
/* Right to Left */
.animation-rl.ng-enter {
-webkit-transition: 1s ease-out all;
-moz-transition: 1s ease-out all;
-o-transition: 1s ease-out all;
transition: 1s ease-out all;
-webkit-transform: translate(100%,0);
-o-transform: translate(100%,0);
-moz-transition: 1s ease-out all;
transform: translate(100%,0);
}
.animation-rl.ng-leave {
-webkit-transition: 0s ease-out all;
-moz-transition: 1s ease-out all;
-o-transition: 0s ease-out all;
transition: 0s ease-out all;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.animation-rl.ng-enter.ng-enter-active {
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.animation-rl.ng-leave.ng-leave-active {
-webkit-transform: translate(-100%,0);
-moz-transform: translate(-100%,0);
-o-transform: translate(-100%,0);
transform: translate(-100%,0);
}