angularJS不能动态添加html

Question

我有一个问题，我正在努力解决，但似乎我无法找到一个适当的解决方案，以实现我的努力。

我试着尽可能地解释我的问题:我需要根据AJAX调用的结果动态地创建一些选项卡标题，所以我不知道会有多少个选项卡，我会张贴我的HTML标记，我的控制器，以及我在DOM中的结果。我希望我能解释得够清楚。

标记的一部分

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


        }

}); 

HTML在DOM中创建

<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标记中手动定义表集结构，我可以看到them..any的想法吗？非常感谢。

Answer 1

正如Cetia所说，您不希望将html“插入”到模板中。相反，您的情况可能需要ng-重复，这是您应该学习使用的最基本的角度指令之一。

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

主计长：

$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/