Javascript Angular js:如何将数据附加到HTML中
嗨,我正在用angularjs实现一个网站 我面临一个问题。我有一个小部件,一次显示10条记录,当我点击查看更多按钮时,它会根据页码获取接下来的10条记录 我实现了一个按钮Javascript Angular js:如何将数据附加到HTML中,javascript,jquery,html,angularjs,model-view-controller,Javascript,Jquery,Html,Angularjs,Model View Controller,嗨,我正在用angularjs实现一个网站 我面临一个问题。我有一个小部件,一次显示10条记录,当我点击查看更多按钮时,它会根据页码获取接下来的10条记录 我实现了一个按钮 `<button ng-click="loadYourRecs(true)">click here for Recs</button> 现在,单击按钮,我将呼叫控制器并获得如下数据:- $scope.loadRated = function(flag){ if(flag==tru
`<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调用获取数据
Th 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);
你能包括HTML代码吗?在任何情况下,如果要追加数据,都不应使用以下行重新分配值:$scope.programs.rated=r.gettopratedhomepage.topratedprogrammelist;您应该循环返回的数据并将它们附加到现有的数组中,包括您的html codeOfftopic。哇!我想知道为什么像angular这样结构良好的框架最终会出现这样的意大利面代码。@Eylen请检查code@Athi..i已包含html代码。请检查it@Eylen..Thanks非常感谢您的帮助。它起了作用,对我也有很大帮助。我唯一需要做的改变就是将$scope.programs.rated改为$scope.programs.rated$rootScope.programs.rated
$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);
});