html characters inside array

Question

trying to show the data inside post.specials with HTML characters. I want to display 'ö' instead of ö ngSanitize and ng-bind-html should do the trick? I'm doing something wrong here

        <script>
            function LunchBox($scope, $http) {
                var url = "yahoo.com/api/callback=JSON_CALLBACK";
                $http.jsonp(url).
                    success(function(data) {
                        $scope.posts = data;
                    }).
                    error(function(data) {
                    });
            };

            angular.module('LunchBox', ['ngSanitize'], ['ui.bootstrap']);
        </script>

<!doctype html>
<html ng-app id="ng-app">
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.min.js"></script>
        <script src="js/ui-bootstrap-tpls-0.10.0.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <h1>Lunchmenu</h1>
        <div id="LunchContainer" ng-app ng-controller="LunchBox">
            <div ng-repeat="post in posts | orderBy:['name']" class='postBody'>
                <h2><a href='{{post.dataurl}}' class="postHeader">{{post.name}}</a></h2>
                <p ng-repeat="special in post.specials" ng-bind-html="post.specials" class="postDetail"></p>
            </div>
        </div>
    </body>
</html>

http://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs — qwetty, Nov 26 '14 at 15:51

score 2 · Accepted Answer · answered Nov 26 '14 at 16:00

From Angular docs: ngBindHtml

You may also bypass sanitization for values you know are safe. To do so, bind to an explicitly trusted value via $sce.trustAsHtml. See the example under Strict Contextual Escaping (SCE).

In your controller, inject $sce and add:

$scope.displaySpecial = function(html)
{
    return $sce.trustAsHtml(html);
};

Then change your view code to:

<p ng-repeat="special in post.specials" 
        ng-bind-html="displaySpecial(special)" class="postDetail">
</p>

html characters inside array

1 Answers1