Javascript 使用AngularJS从JSON对象中过滤HTML

我现在正在做一个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", 
}]

<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>

[{
“ID”：11，
“标题”：“测试”，
“状态”：“发布”，
“类型”：“页面”，
“作者”：{
“ID”：1，
“名称”：“管理员”，
“slug”：“admin”，
“URL”：“，
“阿凡达”：“http:\/\/0.gravatar.com\/avatar\/401f2b3c91dee8969b193544c3d9a636&d=404&r=G”，
“元”：{
“链接”：{
“self”：“http:\/\/geertvandelangenberg.nl\/wp\/wp json.php\/users\/1”，
“归档文件”：“http:\/\/geertvandelangenberg.nl\/wp\/wp json.php\/users\/1\/posts”
}
}
},
“内容”：“testtt\n”，
}]

我的HTML如下所示：

 [{
"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", 
}]

<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>

函数PostsCtrlAjax（$scope，$http）{
$http（{方法：'GET'，url:'http://geertvandelangenberg.nl/wp/wp-json.php/pages/'}）.成功（函数（数据）{
$scope.posts=data；//响应数据
});
}
{{post.date}-{{post.author.name}
{{post.content}

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

提前谢谢

吉尔特

编辑

---

谢谢你到目前为止的评论，任何人都可以编辑这个jsbin，我似乎无法让它工作，即使是AngularJS文档。我仍然对Angular很感兴趣，但如果有人能帮助我，我将不胜感激：）

jsbin.com/oRoqIJEC/1/edit

---

---

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

ng bind html

将呈现您的html。不过，别忘了将

ngSanitize

注入控制器。

ngbind html

将呈现您的html。不过，别忘了将

ngSanitize

注入控制器。

ngbind html

将呈现您的html。不过，别忘了将

ngSanitize

注入控制器。

ngbind html

将呈现您的html。但是，不要忘记将

ngSanitize

注入控制器。

是否要转义标记，以便它可以直接显示

testtt

或删除标记本身，或删除标记及其内容？如果标记确实在做某些事情，那么这些标记可能会有用！现在标签才刚刚打印在屏幕上。听起来你需要从JSON编译HTML，然后使用

如果使用ng bing HTML，你需要将ngSanatize添加到你的应用程序中。你想转义标签，这样它就可以直接显示testtt，或者删除标签本身，或者删除标签及其内容吗？如果标签真的在做什么的话，标签是有用的！现在标签才刚刚打印在屏幕上。听起来你需要从JSON编译HTML，然后使用

如果使用ng bing HTML，你需要将ngSanatize添加到你的应用程序中。你想转义标签，这样它就可以直接显示testtt，或者删除标签本身，或者删除标签及其内容吗？如果标签真的在做什么的话，标签是有用的！现在标签才刚刚打印在屏幕上。听起来你需要从JSON编译HTML，然后使用

如果使用ng bing HTML，你需要将ngSanatize添加到你的应用程序中。你想转义标签，这样它就可以直接显示testtt，或者删除标签本身，或者删除标签及其内容吗？如果标签真的在做什么的话，标签是有用的！现在标签才刚刚打印在屏幕上。听起来你需要从JSON编译HTML，然后使用

如果使用ng bing HTML，你需要将ngSanatize添加到你的应用程序中。这是正确的。对于->上的文档，感谢您到目前为止的评论，是否有人可以编辑此jsbin，即使使用AngularJS文档，似乎也无法使其正常工作。我仍然对Angular很不了解，但如果有人能帮助我，我将不胜感激：）PS.由于愚蠢的访问控制允许源代码问题，jsbin上的输出不起作用..这是正确的。对于->上的文档，感谢您到目前为止的评论，是否有人可以编辑此jsbin，即使使用AngularJS文档，似乎也无法使其正常工作。我仍然对Angular很不了解，但如果有人能帮助我，我将不胜感激：）PS.由于愚蠢的访问控制允许源代码问题，jsbin上的输出不起作用..这是正确的。对于->上的文档，感谢您到目前为止的评论，是否有人可以编辑此jsbin，即使使用AngularJS文档，似乎也无法使其正常工作。我仍然对Angular很不了解，但如果有人能帮助我，我将不胜感激：）PS.由于愚蠢的访问控制允许源代码问题，jsbin上的输出不起作用..这是正确的。对于->上的文档，感谢您到目前为止的评论，是否有人可以编辑此jsbin，即使使用AngularJS文档，似乎也无法使其正常工作。我仍然对Angular很不了解，但如果有人能帮助我，我将不胜感激：）PS.output在jsbin上不起作用，因为愚蠢的访问控制允许源代码问题。。