Angular js：如何将数据附加到 HTML答案

【问题标题】：Angular js:How to append the data into the HTMLAngular js：如何将数据附加到 HTML
【发布时间】：2014-11-13 10:38:39
【问题描述】：

您好，我正在用 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 中的旧内容。我想追加它。

【问题讨论】：

能否包含 HTML 代码？在任何情况下，如果你想附加数据，你不应该用这一行重新分配值： $scope.programs.rated = r.gettopratedhomepage.topratedprogrammelist;您应该只循环返回的数据并将它们附加到现有数组中
包含您的 html 代码
离题。哇，我想知道你为什么有一个像 Angular 这样结构良好的框架，结果却是这样的意大利面条代码。
@Eylen 请检查代码
@Athi..我已经包含了 html 代码。请检查它

标签： javascript jquery html angularjs model-view-controller

【解决方案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);
    });

【讨论】：

非常感谢您的帮助

【解决方案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);

【讨论】：