angularJS无法动态添加html答案

【问题标题】：angularJS can't add html dynamicallyangularJS无法动态添加html
【发布时间】：2015-07-17 17:14:59
【问题描述】：

我遇到了一个我想要解决的问题，但我似乎找不到合适的解决方案来实现我想要做的事情。

我会尽量解释我的问题：我需要根据 AJAX 调用的结果动态创建一些标签标题，所以我事先不知道会有多少标签，我'将发布我的 HTML 标记、我的控制器以及我在 DOM 中的结果。我希望我能解释清楚。

部分 HTML 标记

   <div id="tabPlacer">
   </div>

ANGULARJS 控制器的一部分

    $http({method: 'GET', url: 'getNews.json'}).
    success(function(data, status, headers, config) {

        $scope.news = data;
        createBase();
        var contFirst=0;
        var contSecond=0;
        for (i=0; i< $scope.news.news[0].allNews.length; i++){
        $scope.bodynews[i] =  $scope.news.news[0].allNews[i].bodyNews;
        if(i%2==0)
        {
            $scope.bodynewsR[contFirst] =  $scope.news.news[0].allNews[i].bodyNews;
            contFirst++;
        }
        else{
            $scope.bodynewsL[contSecond] =  $scope.news.news[0].allNews[i].bodyNews;
            contSecond++;
            }
        }
        $scope.noOfPages =Math.floor($scope.news.news[0].allNews.length / ($scope.itemsPerCol*2));  

        $scope.$watch('currentPage', function() {
            begin = (($scope.currentPage - 1) * $scope.itemsPerCol);
            end = begin + $scope.itemsPerCol;
            $scope.pagedL = {
                bodynewsL: $scope.bodynewsL.slice(begin, end)
            }
            $scope.pagedR = {
                bodynewsR: $scope.bodynewsR.slice(begin, end)
            }

        });


    }).
    error(function(data, status, headers, config) {

    });

    function createBase() {
        for (var i = 0; i < $scope.news.news[0].posizioni.length; i++) {
            // $scope.tabsName[i] = $scope.news.news[0].posizioni[i][i];
            $scope.baseString += "<tab heading='" + $scope.news.news[0].posizioni[i][i] + "' ng-controller='MainController'><div class='col-xs-12 col-sm-6 col-md-6' id='colonaDx"+ $scope.news.news[0].posizioni[i][i] +"'></div><div class='col-xs-12 col-sm-6 col-md-6' id='colonaDx"+ $scope.news.news[0].posizioni[i][i] +"'></div><div id='paginaz"+ $scope.news.news[0].posizioni[i][i] +"'></div></tab>";
        }
        $scope.baseString += "</tabset>";

        $("#tabPlacer").html($scope.baseString);


        }

});

在 DOM 中创建的 HTML

<div id="tabPlacer">
    <tabset panel-tabs="true" panel-class="panel-grape" data-heading="OTHER NEWS">
        <tab heading="allNews" ng-controller="MainController">
            <div class="col-xs-12 col-sm-6 col-md-6" id="colonaDxallNews">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-6" id="colonaDxallNews">
            </div>
            <div id="paginazallNews">
            </div>
        </tab>
        <tab heading="SecondTab" ng-controller="MainController">
            <div class="col-xs-12 col-sm-6 col-md-6" id="colonaDxSecondTab">
                </div><div class="col-xs-12 col-sm-6 col-md-6" id="colonaDxSecondTab">
            </div>
            <div id="paginazSecondTab">
            </div>
        </tab>
    </tabset>
</div>

到目前为止，问题是页面上没有任何可视化的内容，但是如果我在 html 标记中手动定义标签集结构，我可以看到它们..有什么想法吗？提前非常感谢。

【问题讨论】：

现在停下来学习 angularjs 的基础知识。您不应该尝试以旧的 jquery 方式添加 html。指令就是为了做到这一点。

标签： javascript jquery ajax angularjs html

【解决方案1】：

正如 Cetia 所说，您不想将 html 以 Angular 的形式“插入”到您的模板中。相反，您的情况可能需要ng-repeat，这是您应该学习使用的非常基本的角度指令之一。

基本上，您需要将获取的数据存储在 $scope 变量中，然后将该变量与 ng-repeat 一起使用，以根据您的数据显示内容。这里是一个基本的例子：

控制器：

$scope.things = [
    {
        name: "Thing1",
        description: "I'm the first thing!"
    },
    {
        name: "Thing2",
        description: "I'm the second thing!"
    }
]

HTML：

<div ng-repeat="thing in things">
    <tr>
        <td>{{thing.name}}:</td>
        <td>{{thing.description}}</td>
    </tr>
</div>

在此处查看小提琴：http://jsfiddle.net/m8qLdhth/1/

【讨论】：