AngularJS ng-repeat display html

Question

I've got simple ng-repeat:

<section id="content" class="container" ng-app="myApp" ng-controller="postsController">
    <div class="row">            

        <div class="col s12 xl6" ng-repeat="post in posts | filter:searchText" on-finish-render="done">
            <div class="card">
                <div class="card-image">
                  <img ng-src="{{post.Thumbnail}}" alt="image">
                  <span class="card-title">{{post.Title}}</span>
                </div>
                <div class="card-content">
                    <p>{{post.Excerpt}}</p>
                </div>
            </div>
        </div>

    </div>
</section>

Angular code:

var myApp = angular.module('myApp',[]);

myApp.controller('postsController',['$scope', '$http', function ($scope, $http) {
    $http.get("api/db.php").
    success(function(response) {
        console.log(response); //For testing
        $scope.posts = response;
        console.log("Connected to MySQL server.");
        $scope.$on('done', function(ngRepeatFinishedEvent) {
            console.log("All content has been loaded :)");
            $('.modal-trigger').leanModal();
        });
    });
}]);

myApp.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit(attr.onFinishRender);
                });
            }
        }
    }
});

Now the problem is in {{post.Excerpt}} that it's saved in HTML in my database. It works but I've get it in text (like in a ). So my question is how to display it with html?

I read some about ng-bind-html-unsafe but many ppl's said that doesn't work. Any suggestions?

Grettings, W

possible duplicate of How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+ — SamV
– SamV, Commented Mar 1, 2015 at 18:54
@SamV - I read that post, but my problem is with ng-repeat. So I didn't find an answer there. — Wojciech Parys
– Wojciech Parys, Commented Mar 1, 2015 at 20:56

A.B · Accepted Answer · 2015-03-01 19:09:34Z

You can make an filter for it.

filter:

myApp.filter('ashtml', function($sce) { return $sce.trustAsHtml; });

view

<div ng-bind-html="post.Excerpt | ashtml"></div>

Working Demo:

     angular.module('myapp', [])
     .controller('HelloWorldCtrl', function($scope){
          $scope.helloMessage = "Hello A.B";
        $scope.post = {};
          $scope.post.Excerpt = '<p>hello html</p>';
          })
     .filter('ashtml', function($sce) { return $sce.trustAsHtml; })
     ;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <!DOCTYPE html>
        <html ng-app="myapp">
        <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        </head>
        <body ng-controller="HelloWorldCtrl">
        <h1 >{{helloMessage}}</h1>
        <div ng-bind-html="post.Excerpt | ashtml"></div>
      
      
      
   
        </body>
        </html>

Collectives™ on Stack Overflow

AngularJS ng-repeat display html

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related