Angularjs ng-repeat of string variable with special characters

Question

I'm doing an ng-repeat of an array with strings in it. The problem is some of the strings have special characters like "degrees" and fractional numbers. The output for the first item in the array below is "Oven 350&#176"....instead of "Oven 350*".

directions = [
				"Oven 350&#176;",
				"Cook potatoes in boiling salted water until done",
				"The next day grate potatoes coarsely",
				"Mix with remaining ingredients",
				"Place in shallow 1.5 or 2 quart baking dish and bake about 35 minutes"
			];

<ul>
  <li ng-repeat="item in directions"></li>
</ul

Martin · Accepted Answer · 2015-02-23 21:59:29Z

3

In order to get the special characters to work you need to use ngBindHtml Documentation here

In order to use ngBindHtml you need to include angular-sanitize.min.js and include ngSanitize in your modules dependencies

Html

<div ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="item in directions">
      <span ng-bind-html='item'></span>
    </li>
  </ul>
</div>

JavaScript

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

function MyCtrl($scope) {
    $scope.directions = [
                "Oven 350&#176;",
                "Cook potatoes in boiling salted water until done",
                "The next day grate potatoes coarsely",
                "Mix with remaining ingredients",
                "Place in shallow 1.5 or 2 quart baking dish and bake about 35 minutes"
            ];
}

See the fiddle here

answered Feb 23, 2015 at 21:59

Martin

2,43711 gold badges30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs ng-repeat of string variable with special characters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related