Filter HTML out of JSON object with AngularJS

Question

I'm currectly working on a Wordpress project. But for a nice change I'm working with a JSON API, which only gives me the information I need.

I'm only facing one problem at the moment. The content part in my JSON contains HTML tags, which get printed on the screen, without actually using the HTML tags.

The JSON output looks like this:

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

My HTML looks like this:

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

Could anyone tell me how I can filter out the HTML tags in the JSON object?

Thanks in advance!

Geert

EDIT

Thanks for you comments so far, could anyone please edit this jsbin, I can't seem to manage to get this to work, even with the AngularJS docs. I'm still quite noobish with Angular, but if someone would help me, it'd be much appreciated :)

jsbin.com/oRoqIJEC/1/edit

PS. output does not work on jsbin because of stupid Access-Control-Allow-Origin issues..

Answer 1

ng-bind-html will render your HTML. Don't forget to inject ngSanitize into your controller though.