Javascript 使用Angular JS将HTML追加到div

我目前正在使用AngularJS构建一个Umbraco仪表板扩展，我想知道是否有一种方法可以将HTML附加到页面上的div中

其想法是，我想创建一种历史记录窗格，每当用户单击按钮触发对我们的web服务的web请求时，该窗格都会更新。然后，web请求返回在Umbraco中更新的每个页面以及每个页面的链接

到目前为止，我有以下几点：

HTML

我假设与jQuery一样，会有某种形式的命名追加函数，但情况并非如此，所以我之前尝试过：

$scope.info = $scope.info + "content updated";

但这会回来的

undefinedcontent updated

因此，我的问题是如何将返回的HTML输出到info div，而不删除其中已有的内容（如果有）

---

非常感谢您的帮助，因为这是我第一次真正尝试使用Angular。

我认为您之前尝试的问题是$scope.info在您第一次尝试附加到它时未定义。如果它是用“”或其他什么东西初始化的，我认为您使用的简单代码应该是：

$scope.info = ""; // don't leave it as undefined
$scope.info = $scope.info + "content updated";

在我看来，你应该使用一个ng repeat来列出消息

例如，如果不只是追加字符串，您可以在控制器中执行以下操作：

$scope.info = []; // empty to start

然后，您将使用某种控制器方法添加新消息：

$scope.addMessage = function(msg) {
    $scope.info.push(msg)
}

然后在视图/HTML中，您将使用ngRepeat：

<div class="info-window">
    <p ng-repeat="item in info track by $index">{{item}}</p>
</div>

{{item}

track by子句允许重复消息

更新：如果$scope.info中的项目实际上是对象，并且您希望迭代它们的属性，这是我认为您在评论中要求的，那么您可以这样做。不过，这已经超出了原始问题的范围：

<div class="info-window">
    <p ng-repeat="item in info track by $index">
        <div ng-repeat="(key, value) in item">{{key}} -> {{value}}</div>
    </p>
</div>

{{key}}->{{value}

通常，在使用Angular时不应附加HTML。相反，使用绑定在视图中动态生成输出。这篇文章可能与您有关：。如果您查看我的代码，该字段确实已绑定。但是，我不希望在下一次请求后清除内容。相反，应该更新内容。我将要运行的方法是完全独立的。你提供的文档并没有真正的帮助，因为我已经知道了其中的大部分内容。他们不只是添加原始HTML，而是使用了

ng repeat

，这更符合一般角度和灵活代码的精神。好吧，那太好了。但是，如果我在Web服务中返回的一个项目本身就是一个对象，例如：object{5118=“哥斯达黎加”，5129=“厄瓜多尔和加拉帕戈斯”，4851=“委内瑞拉”}，那么我将如何循环这些项目并输出键值对？@jezzipin查看我答案中的更新。我希望你是这么问的。但是现在你开始普遍使用ng repeat了。网上有很多关于这方面的文档，这里是SO。谢谢。我一小时前就想出来了，不过谢谢你的回复。

<div class="info-window">
    <p ng-repeat="item in info track by $index">{{item}}</p>
</div>

<div class="info-window">
    <p ng-repeat="item in info track by $index">
        <div ng-repeat="(key, value) in item">{{key}} -> {{value}}</div>
    </p>
</div>