[英]how to append a html template to a div/directive on click with angular js?
[英]Angular js:How to append the data into the HTML
嗨,我正在用angularjs實現一個網站。
我面臨一個問題。 我有一個小部件,一次顯示10條記錄,當我單擊“查看更多”按鈕時,它會根據頁碼獲取下10條記錄。
我已經實現了一個按鈕
`<button ng-click="loadYourRecs(true)">click here for Recs</button>
現在單擊按鈕,我正在調用控制器並獲取數據,如下所示:-
$scope.loadRated = function(flag){
if(flag==true)
{
$rootScope.TopPge +=1;
}
// call api
var $ratedSpinner = $('.rated-spin');
loading('show',{element: $ratedSpinner});
userAPI.topRated({userid: $rootScope.getUser().userid, pageno:$rootScope.TopPge}, function(r){
var loading = $filter('loading');
loading('hide', { element: $('#loadIndicator2') });
$scope.ratedLoaded = true;
loading('hide',{element: $ratedSpinner});
$scope.programs.rated = r.gettopratedhomepage.topratedprogrammelist;
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-398742-8']);
_gaq.push(['_trackEvent','WOITopRated','TopRated','Load']);
for(i=0; i<$scope.programs.rated.length; i++){
//abbreviates the month
$scope.programs.rated[i].timestring = abbrMonth($scope.programs.rated[i].timestring) ;
}
// called with timeout for dom creation
setTimeout(function(){
if(openTabIndex === 3) {
showTab(openTabIndex);
}
showMoreOnTab(3);
}, 5);
});
};
`我正在通過api調用獲取數據。
HTML代碼如下:
<div class='channel-tabs hidden-phone' ng-controller='Home_ProgramsTabController' ng-init='init()'>
<div class='tab clearfix' ng-show="currentActiveTab == 'rated'">
<div class='item' ng-repeat='p in programs.rated' home-tab-item watchable="p" ></div>
<div id="space-for-buttons">
<div class = 'rated-spin' ng-show = 'programs.rated == 0 && ratedLoaded == false'> </div>
<div ng-show="programs.rated == 0 && ratedLoaded == true" class="noResultsBlock">No Results for Rated.</div>
<div class='clearfix'></div>
</div>
<div ng-controller="Home_ProgramsTabController" ng-app="woi">
<button ng-click="loadRated(true)">click here for Rated</button>
</div>
</div>
現在我面臨的問題是,獲取的數據將替換目標div中的舊內容。 我要附加它。
您需要將數據追加到數組。
loading('hide',{element: $ratedSpinner});
var newRated = r.gettopratedhomepage.topratedprogrammelist;
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-398742-8']);
_gaq.push(['_trackEvent','WOITopRated','TopRated','Load']);
for(i=0; i<newRated.length; i++){
//abbreviates the month
newRated[i].timestring = abbrMonth(newRated.timestring) ;
}
//append
$scope.programs.rated = ($scope.programs.rated||[]).concat(newRated);
要么
$scope.programs.rated.push.apply($scope.programs.rated, newRated);
userAPI.topRated({userid: $rootScope.getUser().userid, pageno:$rootScope.TopPge}, function(r){
var loading = $filter('loading');
loading('hide', { element: $('#loadIndicator2') });
$scope.ratedLoaded = true;
loading('hide',{element: $ratedSpinner});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-398742-8']);
_gaq.push(['_trackEvent','WOITopRated','TopRated','Load']);
for(i=0; i<r.gettopratedhomepage.topratedprogrammelist; i++){
//abbreviates the month
var el = r.gettopratedhomepage.topratedprogrammelist[i];
el.timestring = abbrMonth(el.timestring) ;
$scope.programs.rated.push(el);
}
// called with timeout for dom creation
setTimeout(function(){
if(openTabIndex === 3) {
showTab(openTabIndex);
}
showMoreOnTab(3);
}, 5);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.