Angular 1.5.5基于$ http调用的返回值呈现html

问题描述 投票:0回答:1

鉴于以下信息,我想知道最佳方法:

我有一个控制器,使用工厂进行2次http调用。

DataFactory.getTestDisplaySections(testID).then(function (response) {
    $scope.testSections = JSON.parse(response.data);
});

DataFactory.getTestObjectByTestID(testID).then(function (response) {
    $scope.testObject = JSON.parse(response.data);
});

该调用返回两个数组。我想用嵌入在其中的数组生成html。现在,我的控制器模板只包含一个页面的空壳。

<div class="container">
    <div class="row">
        <div ng-bind-html="sectionHTML"></div>
    </div>
</div>

上面的sectionHTML是我的变量,它包含整个页面的html标记。

第一个调用返回数据,该数据为我提供了要在页面上显示的面板的名称。这些可能是4或更多。我想使用以下html来显示每个面板。

$scope.sectionHTML = '<div class="col-lg-6">'+
     '<div class="panel panel-primary">'+
          '<div class="panel-heading lead">' + panelDiaplayName + '</div>' +
           '<div class="panel-body">'+
               '<div id="test_info" class="col-lg-12">' +

               '</div>'+
           '</div>'+
     '</div>'+
'</div>'

我是否应该在for循环中浏览面板数据并为每个面板创建html?

当我尝试使用panelDisplayName添加{{}}它只显示{{panelDisplayName}}这将是一个问题,每次我必须评估角度表达式?我该如何解决这个问题?

其次,我需要在每个面板中显示其他信息。这来自第二次http调用。每个面板都有详细信息,每条信息都可以编辑。任何人都可以帮助最好的方法吗?

如果有人需要,我可以给出更多解释。

谢谢最好

javascript html angularjs angularjs-1.5
1个回答
1
投票

我想你在这里询问多个问题,所以我将尝试帮助解决前两个问题,循环遍历你的数组来构建你的页面并帮助你使{{}}数据绑定工作。

对于你的面板,不要使用for循环并在你的控制器中构建html。你正在使用角度,角度方式是使用ng-repeat。您将此添加到您的html模板,它将通过迭代您的数组来构建dom。在你的例子中:

html的

<div class="container">
    <div class="row">
        <!-- this is where we are iterating over the array (ng-repeat) -->
        <div class="col-lg-6" ng-repeat="section in testSections">
            <div class="panel panel-primary">
                <!-- section is the current item being iterated in the array, so we are printing the displayName for the section -->
                <div class="panel-heading lead">{{section.panelDiaplayName}}</div>
                <div class="panel-body">
                    <div id="test_info" class="col-lg-12">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

至于数据绑定。我的假设是你没有将ng-app和/或ng-controller添加到包含数据绑定的元素中。例如:

html的

<body ng-app="yourApp" ng-controller="yourController">
    <h1>{{testMessage}}</h1>
</body>

app.js

var app = angular.module('yourApp').controller('yourController', ['$scope', function($scope) {
    $scope.testMessage = "Hello World";
}])

至于你关于处理将要编辑的数据的第二个问题,我建议你自己做一个镜头。查看angular formsng-model。那些应该可以帮助你开始。在给出一个镜头之后,如果你还在努力,请针对你正在努力解决的具体问题提出一个新问题。

© www.soinside.com 2019 - 2024. All rights reserved.