I want to have slide tab for 7 pages, but it works correctly for 1 to 5 ,but 6 and 7 will repeat page 1 and 2.
I am not sure which part is incorrect. Took out any two of the pages will work correctly.
template
<ion-content id="screenerContent" scroll="false">
<div class="row slideTabWrapper">
<div class="col col-30 one" ng-class="{selected: currentSlide==0}" ng-click="currentSlide = 0">Top Technical</div>
<div class="col col-30 two" ng-class="{selected: currentSlide==1}" ng-click="currentSlide = 1">Bottom Technical</div>
<div class="col col-30 three" ng-class="{selected: currentSlide==2}" ng-click="currentSlide = 2">Top Fundamental</div>
<div class="col col-30 four" ng-class="{selected: currentSlide==3}" ng-click="currentSlide = 3">Bottom Fundamental</div>
<div class="col col-30 five" ng-class="{selected: currentSlide==4}" ng-click="currentSlide = 4">Top Overall</div>
<div class="col col-30 six" ng-class="{selected: currentSlide==5}" ng-click="currentSlide = 5">Bottom Overall</div>
<div class="col col-30 seven" ng-class="{selected: currentSlide==6}" ng-click="currentSlide = 6">Market Stats</div>
</div>
<ion-slide-box class="slider" show-pager="false" active-slide="currentSlide">
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="bStock in topBuy" ng-click="openDetail(bStock)">
<div class="col col-30 stockCol">
<p>{{bStock.Stock}}</p>
<p>{{bStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[bStock.Trade]"><span>T: {{bStock.Tindex | number:2}}</span></div>
<div class="col previousCol"><span>{{bStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: bStock.Change<0, green: bStock.Change>0,orange: bStock.Change==0}">
<p>{{bStock.Change}}</p>
<p>({{(bStock.Change_pc>=0)?"+":""}}{{bStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="sStock in topSell" ng-click="openDetail(sStock)" >
<div class="col col-30 stockCol">
<p>{{sStock.Stock}}</p>
<p>{{sStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[sStock.Trade]"><span>T: {{sStock.Tindex | number:2}}</span></div>
<div class="col previousCol"><span>{{sStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: sStock.Change<0, green: sStock.Change>0,orange: sStock.Change==0}">
<p>{{sStock.Change}}</p>
<p>({{(sStock.Change_pc>=0)?"+":""}}{{sStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="aStock in topFin" ng-click="openDetail(aStock)">
<div class="col col-30 stockCol">
<p>{{aStock.Stock}}</p>
<p>{{aStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[aStock.Trade]"><span>F: {{aStock.Findex | number:2}}</span></div>
<div class="col previousCol"><span>{{aStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: aStock.Change<0, green: aStock.Change>0,orange: aStock.Change==0}">
<p>{{aStock.Change}}</p>
<p>({{(aStock.Change_pc>=0)?"+":""}}{{aStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="cStock in bottomFin" ng-click="openDetail(cStock)" >
<div class="col col-30 stockCol">
<p>{{cStock.Stock}}</p>
<p>{{cStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[cStock.Trade]"><span>F: {{cStock.Findex | number:2}}</span></div>
<div class="col previousCol"><span>{{cStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: cStock.Change<0, green: cStock.Change>0,orange: cStock.Change==0}">
<p>{{cStock.Change}}</p>
<p>({{(cStock.Change_pc>=0)?"+":""}}{{cStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="dStock in topVin" ng-click="openDetail(dStock)">
<div class="col col-30 stockCol">
<p>{{dStock.Stock}}</p>
<p>{{dStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[dStock.Trade]"><span>V: {{dStock.Vindex | number:2}}</span></div>
<div class="col previousCol"><span>{{dStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: dStock.Change<0, green: dStock.Change>0,orange: dStock.Change==0}">
<p>{{dStock.Change}}</p>
<p>({{(dStock.Change_pc>=0)?"+":""}}{{dStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="list">
<div class="item row" ng-repeat="eStock in bottomVin" ng-click="openDetail(eStock)" >
<div class="col col-30 stockCol">
<p>{{eStock.Stock}}</p>
<p>{{eStock.Name}}</p>
</div>
<div class="col boldText vindexCol" ng-class="colorCoding[eStock.Trade]"><span>V: {{eStock.Vindex | number:2}}</span></div>
<div class="col previousCol"><span>{{eStock.Previous_close}}</span></div>
<div class="col changeCol" ng-class="{red: eStock.Change<0, green: eStock.Change>0,orange: eStock.Change==0}">
<p>{{eStock.Change}}</p>
<p>({{(eStock.Change_pc>=0)?"+":""}}{{eStock.Change_pc}}%)</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="row">
<div class="col boldText" ng-class="colorCoding[marketSentiment]">
Market Sentiment: {{marketSentiment}}
</div>
</div>
<div class="row">
<div class="col boldText">
<div class="barChart">
<div class="green" style="width: {{bar.green/bar.total *100}}%;"></div><div class="orange" style="width: {{bar.orange/bar.total *100}}%;"></div><div class="red" style="width: {{bar.red/bar.total *100}}%;"></div>
</div>
<span class="greenText">Bull: {{bar.green}}</span><br>
<span class="orangeText">Neutral: {{bar.orange}}</span><br>
<span class="redText">Bear: {{bar.red}}</span><br>
</div>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
angular.js
angular.module('myproject.controllers').controller('stockScreenerCtrl',
['$scope', '$rootScope', '$cashDataFactory', '$webServicesFactory', '$marketProvider', '$colorCodeProvider', '$state', '$globalFactory', '$ionicLoading',
function($scope, $rootScope, $cashDataFactory, $webServicesFactory, $marketProvider, $colorCodeProvider, $state, $globalFactory, $ionicLoading) {
$ionicLoading.show();
$scope.bar = {green: 0, orange: 0, red: 0, total: 1};
$scope.currentSlide = 0;
$scope.currentMarket = $cashDataFactory.getItem("currentMarket");
$scope.colorCoding = $colorCodeProvider;
function loadTop() {
$webServicesFactory.get($marketProvider[$scope.currentMarket].topGetURL, {AnonymousToken: $marketProvider[$scope.currentMarket].token}).then(
function success(response) {
$scope.topBuy = response.Stock.slice(0, 10);
$scope.topSell = response.Stock.slice(10, 20);
loadStockCount();
loadTopF();
loadTopV();
$ionicLoading.hide();
},
function error(error) {
$ionicLoading.hide();
}
);
}
function loadTopF() {
$webServicesFactory.get($marketProvider[$scope.currentMarket].topFinURL, {AnonymousToken: $marketProvider[$scope.currentMarket].token}).then(
function success(response) {
$scope.topFin = response.Stock.slice(0, 10);
$scope.bottomFin = response.Stock.slice(10, 20);
loadStockCount();
loadTop();
loadTopV();
$ionicLoading.hide();
},
function error(error) {
$ionicLoading.hide();
}
);
}
function loadTopV() {
$webServicesFactory.get($marketProvider[$scope.currentMarket].topVinURL, {AnonymousToken: $marketProvider[$scope.currentMarket].token}).then(
function success(response) {
$scope.topVin = response.Stock.slice(0, 10);
$scope.bottomVin = response.Stock.slice(10, 20);
loadStockCount();
loadTop();
loadTopF();
$ionicLoading.hide();
},
function error(error) {
$ionicLoading.hide();
}
);
}
function loadStockCount() {
$webServicesFactory.get(
$marketProvider[$scope.selectedMarket].queryURL+"/count",
{AnonymousToken: $marketProvider[$scope.selectedMarket].token}
).then(
function success(data) {
data = data.Trade;
console.info(data);
$scope.bar.total = (data[0].BUY_total||0) + (data[0].HOLD_total||0) + (data[0].SELL_total||0);
console.info($scope.bar.total);
$scope.bar.green = 0;
$scope.bar.orange = 0;
$scope.bar.red = 0;
$scope.bar.green = data[0].BUY_total;
$scope.bar.orange = data[0].HOLD_total;
$scope.bar.red = data[0].SELL_total;
$scope.marketSentiment = data[0].Market_sentiment;
$ionicLoading.hide();
},
function error(error) {
$ionicLoading.hide();
}
);
}
loadTop();
loadTopF();
loadTopV();
$scope.openDetail = function (stock) {
console.log(stock + " /hello");
$globalFactory.stockDetail = {};
console.info(stock);
//if($scope.currentMarket == "kls")
$globalFactory.stockDetail.stock = stock.Stock;
$globalFactory.stockDetail.market = $scope.currentMarket;
$state.go("app.screenerDetail");
};
$rootScope.$on("currentMarketChanged", function (e, market) {
$scope.currentMarket = market;
$ionicLoading.show();
loadTop();
loadTopV();
loadTopF();
});
}
]
);
css
#screenerContent .slideTabWrapper{
height: 50px;
color: #ffffff;
padding: 0;
overflow-x: scroll;
overflow-y: hidden;
}
#screenerContent .slideTabWrapper .col{
height: 100%;
width: 33%;
text-align: center;
padding-top: 0px;
background-color: #16324f;
}
.slideTabWrapper .col.one{
border-bottom: solid #33cd5f 3px;
}
.slideTabWrapper .col.two{
border-bottom: solid #ef473a 3px;
}
.slideTabWrapper .col.three{
border-bottom: solid #33cd5f 3px;
}
.slideTabWrapper .col.four{
border-bottom: solid #ffffff 3px;
}
.slideTabWrapper .col.five{
border-bottom: solid #33cd5f 3px;
}
.slideTabWrapper .col.six{
border-bottom: solid #ffffff 3px;
}
.slideTabWrapper .col.seven{
border-bottom: solid #ffffff 3px;
}
.slideTabWrapper .col.selected{
background-color: #102439;
}