Угловые js: Как добавить данные в HTML

Question

Привет Я реализую сайт в 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); 
     }); 
    }; 

` Я получаю данные через апи.

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> 

Теперь проблема я облицовка Данные, которые скачиваются заменяет старое содержание в целевых делах. Я хочу добавить его.

Answer 1

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); 
    }); 

Answer 2

Вам необходимо добавить данные в массив.

 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);