Angular JS使用嵌套字典更新html

时间:2015-07-30 15:48:46

标签: javascript html angularjs dictionary

我对AngularJS相当新......而且目前还有一些不起作用。

我在控制器范围内创建了一个字典,并在http请求后将其填满。 (键,值对)

字典创建得很好,它没有显示任何错误,但HTML没有根据ng-bind-html进行更新。

有没有办法动态创建键值对并将其绑定到HTML?

控制器

$scope.htmlData = {
            };
$http.get('SOME URL TO JSON').
        success(function(data, status, headers, config) {
            for (var i = 0; i < data.section_content.length; i++)
            {
                $scope.htmlData[data.section_content[i].name] = data.section_content[i];

            }
            console.log($scope.htmlData);


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

HTML

&#13;
&#13;
<!-- HOME PART 1: Welcome -->
<div class="row margin-bottom-50"  ng-bind-html="$scope.htmlData.title_text.content">

</div>

<!-- HOME PART 2: EQ COLUMN -->
<div class="row" style='background: #E6E7E8;'>
    <div class='container'>
        <div class="row row-eq-height">
            <div class='col-md-4 home-info-panels' style="border-right: 1px solid black;" ng-bind-html="$scope.htmlData.info_column_1.content">
                
            </div>
            <div class='col-md-4 home-info-panels' style="border-right: 1px solid black;" ng-bind-html="$scope.htmlData.info_column_2.content">
                
            </div>
            <div class='col-md-4 home-info-panels' ng-bind-html="$scope.htmlData.info_column_3.content">
                
            </div>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

您无需指定$scope,只需指定属性名称。

所以而不是

ng-bind-html="$scope.htmlData.info_column_3.content"

DO

ng-bind-html="htmlData.info_column_3.content"