json.view 中的 HTML 标记使用 angularjs

HTML tags inside json..view using angularjs

本文关键字:angularjs view 中的 HTML json      更新时间:2023-09-26

这是我的json数据

[{"Country" : "Germ<sup>any</sup>"},{"Country" : "Swe<sup>den</sup>"}]

这是我如何使用角度 js 获取它的方式

<div ng-app="" ng-controller="customersController"> 
<ul><li ng-repeat="x in names">{{ x.Country }}</li></ul>
</div>

和控制器脚本

function customersController($scope,$http){
$http.get("http://localhost/sample.php").success(function(response) {$scope.names = response;});
}

我得到的输出是

<ul>
<li>Germ&lt;sup&gt;any&lt;/sup&gt;</li>
<li>Sweden</li>
 </ul>

但我想要的输出是

<ul>
<li>Germ<sup>any</sup></li>
<li>Swe<sup>den</sup></li>
</ul>

需要帮助来解决这个问题...

您需要对尝试打印HTML内容的div使用ng-bind-html

有关详细信息,请参阅此链接并相应地更改代码。

默认情况下,AngularJS会清理您的数据并剥离所有HTML。

若要实现所需的目标,请使用 $sce 服务将数据标记为受信任,并使用 ngBindHtml 指令将其绑定到视图,如下所示:

添加新筛选器

app.filter('unsafe', ['$sce', function($sce) {
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}])

在 HTML 中使用它

<ANY ng-bind-html="data | unsafe"></ANY>