angular.js ng-repeat li items with html content

Question

I have a model that comes back from the server which contains html instead of text (for instance a b tag or an i tag)
when I use ng-repeat to built a list out of it it shows the html as pure text, is there a built in filter or directive that put's the html inside the li items or not?
I've looked in the documentation but since I'm still very new to it I'm having difficulties finding it.

ng-repeat:

    <li ng-repeat="opt in opts">

JSFiddle:

http://jsfiddle.net/gFFBa/1/

In your jsFiddle you're trying to put html in `option` tags. You can not do it: http://stackoverflow.com/questions/11237807/can-i-use-html-tags-in-the-options-for-select-elements — Ivan Chernykh, Oct 01 '13 at 08:27
I've included the wrong fiddle, my bad now it's the correct one — J.Pip, Oct 01 '13 at 08:37

score 44 · Accepted Answer · edited May 23 '17 at 12:02

44

It goes like ng-bind-html-unsafe="opt.text":

<div ng-app ng-controller="MyCtrl">
    <ul>
    <li ng-repeat=" opt in opts" ng-bind-html-unsafe="opt.text" >
        {{ opt.text }}
    </li>
    </ul>

    <p>{{opt}}</p>
</div>

http://jsfiddle.net/gFFBa/3/

Or you can define a function in scope:

 $scope.getContent = function(obj){
     return obj.value + " " + obj.text;
 }

And use it this way:

<li ng-repeat=" opt in opts" ng-bind-html-unsafe="getContent(opt)" >
     {{ opt.value }}
</li>

http://jsfiddle.net/gFFBa/4/

Note that you can not do it with an option tag: Can I use HTML tags in the options for select elements?

edited May 23 '17 at 12:02

Community

1
1

answered Oct 01 '13 at 08:37

Ivan Chernykh

41,617
13
134
146

how do you seperate properties in the expression, I thought through a comma seperated list or array ([]) but it only shows the first one then. for instance ng-bind-html-unsafe="opt.text, opt.value" – J.Pip Oct 01 '13 at 09:12
does this still work in angular 1.2? i noticed that the fiddles are using 1.0 – Hoppe Jun 18 '14 at 00:38
html-bind-unsafe has being removed since 1.2 @see [link](https://docs.angularjs.org/guide/migration#ngbindhtmlunsafe-has-been-removed-and-replaced-by-ngbindhtml) – v.babak Mar 09 '16 at 09:28

score 11 · Answer 2 · edited May 23 '17 at 12:17

11

Note that ng-bind-html-unsafe is no longer suppported in rc 1.2. Use ng-bind-html instead. See: With ng-bind-html-unsafe removed, how do I inject HTML?

edited May 23 '17 at 12:17

Community

1
1

answered Aug 27 '14 at 14:25

Peter Drinnan

4,344
1
36
29

Thanks for the follow-up since pretty much everything else here is deprecated. – Phil Nicholas Oct 06 '15 at 02:25

Atropo · Answer 3 · 2013-10-01T08:38:19.453

You can use NGBindHTML or NGbindHtmlUnsafe this will not escape the html content of your model.

http://jsfiddle.net/n9rQr/

<div ng-app ng-controller="MyCtrl">
    <ul>
    <li ng-repeat=" opt in opts"  ng-bind-html-unsafe="opt.text">
        {{ opt.text }}
    </li>
    </ul>

    <p>{{opt}}</p>
</div>

This works, anyway you should be very careful when using unsanitized html content, you should really trust the source of the content.

score 4 · Answer 4 · edited Feb 09 '15 at 03:14

4

use ng-bind-html-unsafe

it will apply html with text inside like below:

    <li ng-repeat=" opt in opts" ng-bind-html-unsafe="opt.text" >
        {{ opt.text }}
    </li>

edited Feb 09 '15 at 03:14

mido

24,198
15
92
117

answered Oct 01 '13 at 08:47

Nitu Bansal

3,826
3
18
24

score 4 · Answer 5 · answered Mar 09 '16 at 09:23

Here is directive from the official examples angular docs v1.5 that shows how to compile html:

.directive('compileHtml', function ($compile) {
  return function (scope, element, attrs) {
    scope.$watch(
      function(scope) {
        return scope.$eval(attrs.compileHtml);
      },
      function(value) {
        element.html(value);
        $compile(element.contents())(scope);
      }
    );
  };
});

Usage:

<div compile-html="item.htmlString"></div>

It will insert item.htmlString property as html any place, like

<li ng-repeat="item in itemList">
    <div compile-html="item.htmlString"></div>

score 3 · Answer 6 · edited Oct 01 '13 at 08:42

3

If you want some element to contain a value that is HTML, take a look at ngBindHtmlUnsafe.

If you want to style options in a native select, no it is not possible.

edited Oct 01 '13 at 08:42

Gurpreet Singh

20,907
5
44
60

answered Oct 01 '13 at 08:31

Nikos Paraskevopoulos

39,514
12
85
90

I'm sorry I've forgot to update the fiddle, my bad if you'd look now you'll see what I was trying to accomplish – J.Pip Oct 01 '13 at 08:35
and how you're using it with a `ng-repeat` directive? – Ivan Chernykh Oct 01 '13 at 08:35

score 1 · Answer 7 · edited Feb 29 '16 at 01:52

1

ng-bind-html-unsafe is deprecated from 1.2. The correct answer should be currently:

HTML-side: (the same as the accepted answer stated):

<div ng-app ng-controller="MyCtrl">
   <ul>
      <li ng-repeat=" opt in opts" ng-bind-html-unsafe="opt.text">
        {{ opt.text }}
      </li>
   </ul>

   <p>{{opt}}</p>
</div>

But in the controller-side:

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
// ...
   $scope.opts.map(function(opt) { 
      opt = $sce.trustAsHtml(opt);
   });
}

edited Feb 29 '16 at 01:52

developer033

24,267
8
82
108

answered Aug 14 '15 at 18:31

Asqan

4,319
11
61
100

You should use ` ng-bind-html` if you call `$sce.trustAsHtml` – Jens Aug 03 '16 at 11:49

angular.js ng-repeat li items with html content

7 Answers7

Linked