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

Answer 1

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 AB"; $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>

AngularJS ng-repeat display html

Question

1 answers

solution1
2 2015-03-01 19:00:52

AngularJS ng-repeat display html

Question

1 answers

solution1 2 2015-03-01 19:00:52

solution1
2 2015-03-01 19:00:52