gpt4 book ai didi

javascript - Angular 1.5.5 基于 $http 调用的返回值渲染 html

转载 作者:行者123 更新时间:2023-12-03 02:21:59 25 4
gpt4 key购买 nike

我想知道根据以下信息进行操作的最佳方法:

我有一个 Controller ,它使用工厂进行 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,其中嵌入了数组中的数据。现在,我的 Controller 模板仅包含页面的空壳。

<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}} 这将是问题是,每次我必须评估 Angular 表达式时?我该如何解决这个问题?

其次,我还有其他信息需要在每个面板中显示。这来自第二个 http 调用。每个面板都会包含详细信息,并且每条信息都是可编辑的。有人可以帮忙找到最好的方法吗?

如果有人需要,我可以提供更多解释。

谢谢帕拉斯

最佳答案

我认为您在这里询问了多个问题,因此我将尝试帮助解决前两个问题,循环遍历您的数组来构建页面并帮助您获取 {{}} 数据 -与工作绑定(bind)。

对于您的面板,不要使用 for 循环并在 Controller 中构建 html。您正在使用 Angular , Angular 方式是使用 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>

至于数据绑定(bind)。我在这里的假设是,您没有将 ng-app 和/或 ng-controller 添加到包含数据绑定(bind)的元素中。例如:

.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 。这些应该可以帮助您入门。尝试后,如果您仍然遇到困难,请针对您遇到的具体问题提出一个新问题。

关于javascript - Angular 1.5.5 基于 $http 调用的返回值渲染 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49120066/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com