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

Question

根据以下信息，我想知道继续进行的最佳方式：

我有一个控制器，它使用工厂进行 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);
});

调用returns两个数组。我想用嵌入其中的数组中的数据生成 html。现在，我的控制器模板只包含一个空的 shell 页面。

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

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

第一次调用 returns 数据，它为我提供了要在页面上显示的面板的名称。这些可能是 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 调用。每个面板都将包含详细信息，并且每条信息都是可编辑的。任何人都可以帮助最好的方法吗？

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

谢谢段

Answer 1

我认为你在这里问了多个问题，所以我会尝试帮助解决前两个问题，遍历你的数组来构建你的页面并帮助你获得 {{}} data-binding工作。

对于您的面板，不要使用 for 循环并在您的控制器中构建 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>

至于data-binding。我在这里的假设是您没有将 ng-app and/or ng-controller 添加到包含 data-binding 的元素中。例如：

.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 forms and ng-model。这些应该可以帮助您入门。试一试之后，如果您仍在苦苦挣扎，请针对您正在苦苦挣扎的具体问题提出一个新问题。

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

Angular 1.5.5 render html based on return value of an $http call

html

javascript

angularjs

angularjs-1.5