Angular 1.5.5 根据$http调用的返回值呈现 html



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

我有一个控制器,它使用工厂进行 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 调用。每个面板都将包含详细信息,并且每条信息都是可编辑的。有人能帮忙找到最好的方法吗?

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

谢谢 帕拉斯

我认为您在这里询问了多个问题,因此我将尝试帮助解决前两个问题,循环遍历数组以构建页面并帮助您使{{}}数据绑定正常工作。

对于面板,不要使用 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>

应用.js

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

至于你关于处理将要编辑的数据的第二个问题,我建议你自己试一试。看看角度形式和ng模型。这些应该可以帮助您入门。试一试之后,如果您仍在挣扎,请针对您正在努力解决的特定问题提出一个新问题。

相关内容

  • 没有找到相关文章

最新更新