How to append data in HTML via click event in angular js(ajax)

Question

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 &amp; 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.

You shouldn't use jQuery in your controller. I advise you to read [this article](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background). jQuery should be use in directives. You should use databinding in your html code to display all your elements. — e666, Aug 28 '14 at 07:32
@e666 The code is already written ..I am actually working on some small changes and am getting some issues. — , Aug 28 '14 at 10:15

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

I found almost the same question at stackoverflow: How to append data to div using javascript?. Take a look at their anwsers

edited May 23 '17 at 12:22

Community

1
1

answered Aug 28 '14 at 06:50

Vinc199789

1,046
1
10
31

@Vinc199789..This does not work in angular..I know the properties in javascript.But thanks for the help – Aug 28 '14 at 06:59

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

You can do it compiling the html string with the data. Use $compile(your html data)

I suggest you pass the element (which must receive the html) as parameter for the ng-click.

Please see Insert and parse HTML into view using AngularJS this will help you with more detail.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 28 '14 at 08:06

Alberto León

2,879
2
25
24

How to append data in HTML via click event in angular js(ajax)

2 Answers2