CODEWITHSUNDEEP
javascripthtmlangularjsbinding
Daniel Flippance
Daniel Flippance

Reputation: 7932

html not rendered in ng-repeat

I'm having problems rendering a piece of HTML inside an ng-repeat. The £ is not being rendered as HTML but as plain text - see http://jsfiddle.net/b3Em6/1/

<div ng-app>
    <ul ng-controller="CartController">
        <li ng-repeat="charge in charges">
            <span ng-bind-html-unsafe="charge.currencySymbol">{{charge.currencySymbol}}</span>
            <span ng-bind="charge.price"></span>
        </li>
    </ul>
</div>

script

function CartController($scope) {

    $scope.charges = [
        { price: 22, currencySymbol: 'C$'},
        { price: 44, currencySymbol: '&pound;'}
    ];
}

The result shown is:

C$ 22
&pound; 44

If I take out {{charge.currencySymbol}} the currency isn't shown at all. I'm using AngularJS 1.2.7

Upvotes: 0

Views: 329

Answers (2)

dnc253
dnc253

Reputation: 40327

ng-bind-html-unsafe no longer exists in the 1.2.x versions of Angular. See http://docs.angularjs.org/guide/migration#ngbindhtmlunsafe-has-been-removed-and-replaced-by-ngbindhtml

You need to include the ngSanitize module and use ng-bind-html. See updated fiddle using latest version of Angular: http://jsfiddle.net/b3Em6/3/

Upvotes: 2

amankapur91
amankapur91

Reputation: 484

Use the symbols directly as shown here http://jsfiddle.net/b3Em6/2/

function CartController($scope) {

$scope.charges = [
    { price: 22, currencySymbol: '$'},
    { price: 44, currencySymbol: '£'}
  ];
}

Upvotes: 1

Related Questions