如何从JSON字符串中使用AngularJS显示HTML
How to show HTML with AngularJS from JSON string
我很难从JSON字符串中显示HTML代码。您可以在地址中看到HTML标记。有什么办法可以正确地显示它吗?
我的模板是:
<div ng-app ng-controller="jsonp_example">
<ul ng-repeat="item in data">
<li>{{item.ID}}</li>
<li>{{item.post_title}}</li>
<li ng-bind-html-unsafe="getContent(obj)">{{item.custom_fields.sponsor_address}}</li>
<li>
<img src="{{item.custom_fields.sponsor_logo}}" width="100">
<ul>
<li>
<hr>
</li>
</ul>
</li>
</ul>
</div>
和脚本:
function jsonp_example($scope, $http) {
$scope.getContent = function (obj) {
return obj.custom_fields.sponsor_address
};
var url = "https://eventident.com/api/getposts/?auth_key=s2mEus39R296M5F6n343A3dh9c62f7cm&custom_post=sponsors&callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
$scope.data = data.result;
});
}
请随意修改我的jsfiddle:http://jsfiddle.net/1295z4bc/
您是否将angular-splice.js作为依赖项包含在内?(作为脚本和角度模块依赖项)
此外,您不需要使用ng-bind-html的{{}}
,只需要
<li ng-bind-html="item.custom_fields.sponsor_address"></li>
可以。
您需要包含ngSanitize服务并直接使用ng-bind-html
。
以下是您的更新jsfiddle:http://jsfiddle.net/e01xj547/9/
您可能需要使用$sce
服务来显式信任html字符串。例如var trustedHtml=$sce.trustAsHtml('<em>My html string</em>');
在您的情况下,以下用法将是合适的:
function jsonp_example($scope, $http, $sce) {
$scope.getContent = function (obj) {
return $sce.trustAsHtml(obj.custom_fields.sponsor_address);
};
var url = "https://eventident.com/api/getposts/?auth_key=s2mEus39R296M5F6n343A3dh9c62f7cm&custom_post=sponsors&callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
$scope.data = data.result;
});
}
示例用法:http://jsbin.com/zopenoqipi/2/edit?html,js,输出
相关文章:
- Angularjs显示给定ISO格式的日期
- 如何使用AngularJS显示按钮或锚标记值
- 如何使用 Angularjs 显示面包屑
- angularjs显示没有'不起作用
- 从维基百科检索数据并使用angularjs显示
- AngularJS-显示过滤数据的长度
- AngularJS - 显示/隐藏加载器
- Angularjs:显示字符串中的最后四个字符,并将其余字符替换为“X”
- Angularjs 显示来自 json 的日期格式
- AngularJS - 显示/隐藏根范围内的元素
- 使用 angularJs 显示来自套接字 io 的数据
- 使用 Angularjs 显示授权内容
- 如果文本格式化为 html,则使用 angularjs 显示更少/更多的文本
- angularjs显示ng重复列表中的最后5项
- AngularJS显示复杂对象
- 如何使用Wikimedia API和AngularJS显示维基百科页面的缩略图
- Angularjs显示图像斑点
- AngularJS显示JSON数据
- angularJS显示空白页面没有错误-控制器问题
- 为什么angularjs显示标记,而不是谷歌地图中的路线