使用AngularJS从JSON对象中过滤HTML

Filter HTML out of JSON object with AngularJS

本文关键字：过滤 HTML 对象 JSON AngularJS 使用      更新时间：2024-05-10

我目前正在处理一个Wordpress项目。但为了一个好的改变，我正在使用JSON API，它只提供我需要的信息。

我现在只面临一个问题。JSON中的内容部分包含HTML标记，这些标记打印在屏幕上，而不实际使用HTML标记。

JSON输出如下所示：

 [{
"ID": 11,
"title": "test",
"status": "publish",
"type": "page",
"author": {
    "ID": 1,
    "name": "admin",
    "slug": "admin",
    "URL": "",
    "avatar": "http:'/'/0.gravatar.com'/avatar'/401f2b3c91dee8969b193544c3d9a636&d=404&r=G",
    "meta": {
        "links": {
            "self": "http:'/'/geertvandelangenberg.nl'/wp'/wp-json.php'/users'/1",
            "archives": "http:'/'/geertvandelangenberg.nl'/wp'/wp-json.php'/users'/1'/posts"
        }
    }
},
"content": "<p>testtt<'/p>'n", 
}]

我的HTML如下所示：

<script src="http://geertvandelangenberg.nl/wp/wp-content/themes/twentythirteen/js/angular.min.js"></script>
<script>
    function PostsCtrlAjax($scope, $http) {
        $http({method: 'GET', url: 'http://geertvandelangenberg.nl/wp/wp-json.php/pages/'}).success(function(data) {
            $scope.posts = data; // response data 
        });
    }
</script>
    <div id="ng-app" ng-ap- ng-controller="PostsCtrlAjax">
        <div ng-repeat="post in posts">
            <h2>
                <a href='{{post.link}}'>{{post.title}}</a>
            </h2>
            <div class="time">
                {{post.date}} - {{post.author.name}}
            </div>
            <p>{{post.content}}</p>
        </div>
    </div>

有人能告诉我如何过滤掉JSON对象中的HTML标记吗？

提前感谢！

Geert

编辑

感谢您到目前为止的评论，有人能编辑这个jsbin吗？我似乎无法让它发挥作用，即使是使用AngularJS文档。我对Angular仍然很满意，但如果有人能帮助我，我将不胜感激：）

jsbin.com/oRoqIJEC/1/编辑

PS。由于愚蠢的访问控制允许起源问题，输出在jsbin上不起作用。。

ng-bind-html将呈现您的HTML。不过，不要忘记将ngSanitize注入控制器。

相关文章：