AngularJS数组值包含HTML标记,在调用时无法正确显示

时间:2016-06-30 11:09:21

标签: javascript arrays angularjs

我有一个数组(在Angular中),看起来像这样

$scope.posts = [
    {
        "ID" : id(),
        "Title" : "A",
        "Company" : "Company A",
        "Location" : "San Francisco, CA",
        "Date" : "2016-06-20",
        "Description": "Description<br>Desciption part 2",
     }
];

使用<p>{{post.description}}</p>的div中的ng-repeat = "post in posts"调用说明。

然而,结果是它显示如下

Description.<br>Description part 2

而不是

描述
描述第2部分。

插入<ul><li>标记同样如此。

有没有什么方法可以让数组值中的html结构实际显示为html而不是像这样明确显示?

3 个答案:

答案 0 :(得分:5)

您应该使用类似ng-bind-html="post.Description"的内容将其显示为HTML。

或者您可以使用ngSanitize来清理HTML

像这里的事情 - https://jsfiddle.net/datachand/szc550yb/4/

在控制器中,如果需要,请尝试使用$sce.trustAsHtml(post.Description)

答案 1 :(得分:1)

使用angular的ngBindHtml指令正确显示html:

https://docs.angularjs.org/api/ng/directive/ngBindHtml

另外,请注意您需要将ngSanitize添加到模块中。

答案 2 :(得分:0)

<p>{{post.Description}}</p>

资本描述