I am a newbie in angularjs.
I am working on a project and have to display the top rated programs and exclusive programs in the project. I was trying to append the data which I am getting from the Api call and put it in the HTML.The data is dynamic and I have tried to implement in controller and have got stuck in it.
The value should get appended in the HTML and the data is dynamic.
The controller is as follows.:-
abc.controller('Home_ProgramsTabController', ['$scope', '$rootScope', '$timeout', '$filter', 'recoAPI', 'userAPI','$location', function($scope, $rootScope, $timeout, $filter, recoAPI, userAPI, $location){
var loading = $filter('loading');
var $channelTabs = $(".channel-tabs").hide();
var $tabButtons;
var $tabs;
var $moreButtons;
var openTabIndex;
// escope filter methods
var addZero = $filter('addZero');
var isoToDate = $filter('isoToDate');
$scope.elements = function() {
$tabButtons = $channelTabs.find(".tab-btn");
$tabs = $channelTabs.find(".tab");
$moreButtons = $channelTabs.find(".more");
};
$scope.elements();
$scope.programs = {
yourrecs:[],
premiers:[],
exclusives:[],
rated:[]
};
$scope.loadYourRecs = function(){
if($rootScope.isUserLogged())
var $recSpinner = $('.recs-spin');
loading('show',{element: $recSpinner});
userAPI.yourRecs( {userid:$rootScope.getUser().userid}, function(r) {
$scope.recsLoaded = true;
loading('hide',{element: $recSpinner});
if(!r.getrecommendationpreferences){
$timeout(function(){
showTab(0);
});
return false;
}
/* Changed in order to cope with server isssue. */
// $scope.programs.yourrecs = r.getrecommendationpreferences.recommendationlist;
$scope.programs.yourrecs = _.map(r.getrecommendationpreferences.recommendationlist,function(item){
if (_.isUndefined(item.programmeid) && !_.isUndefined(item.programid)) {
item.programmeid = item.programid;
}
return item;
});
for(i=0; i<$scope.programs.yourrecs.length; i++){
//abbreviates the month
$scope.programs.yourrecs[i].timestring = abbrMonth($scope.programs.yourrecs[i].timestring) ;
}
// called with timeout for dom creation
setTimeout(function(){
if(openTabIndex === 0) {
showTab(openTabIndex);
}
showMoreOnTab(0);
}, 5);
});
};
$scope.loadRated = function(pageno){
// call api
$scope.pageNo=1;
var $ratedSpinner = $('.rated-spin');
loading('show',{element: $ratedSpinner});
for($scope.pageNo=1;$scope.pageNo<3;$scope.pageNo++)
{
userAPI.topRated({userid: $rootScope.getUser().userid}, function(r){
$scope.ratedLoaded = true;
loading('hide',{element: $ratedSpinner});
if( $scope.pageNo == 1 && !$rootScope.device.isMobile && !$rootScope.device.isTablet && !$rootScope.device.isTouch ) {
$scope.programs.rated = r.gettopratedhomepage.topratedprogrammelist;
}
else{
$scope.pageNo++;
$scope.programs.rated = r.gettopratedhomepage.topratedprogrammelist;
}
// called with timeout for dom creation
setTimeout(function(){
if(openTabIndex === 1) {
showTab(openTabIndex);
}
showMoreOnTab(1);
}, 5);
});
};
};
]};
The html is as follows:-
<div class='tab clearfix' ng-show="userLogged=='on' && currentActiveTab == 'recs'">
<div class='item' ng-repeat='p in programs.yourrecs' home-tab-item watchable="p"></div>
<div class = 'recs-spin' ng-show = 'programs.yourrecs == 0 && recsLoaded == false'> </div>
<div ng-show="programs.yourrecs == 0 && recsLoaded == true" class="noResultsBlock">Favorite your programs & channels and help us recommend!</div>
<div class='clearfix' ></div>
<a href='#' class='more' style="display:block;" >{{programs.yourrecs.length}}</a>
</div>
The same is implemented for toprated programs..On the click event on more,I want to display the data or append the data which I get from the second page from the api in the controller.
Please help me I am stuck on it.
