Question

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

我试着尽可能地解释我的问题：我需要根据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标记中手动定义tabset结构，我可以看到它们。任何想法？非常感谢提前。

Answer 1

正如Cetia所说，您不希望以角度“插入”html到您的模板中。相反，您的情况可能需要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/

angularJS无法动态添加html

1 个答案: