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        lt li ng-repeat  opt in opts  gt    JSFiddle    http   jsfiddle net gFFBa 1

User · Answer

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);
   });
}

User · Answer

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

User · Answer

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

User · Answer

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    lt div compile-html  item htmlString  gt  lt  div gt    It will insert item htmlString property as html any place  like   lt li ng-repeat  item in itemList  gt       lt div compile-html  item htmlString  gt  lt  div gt

User · Answer

You can use NGBindHTML or NGbindHtmlUnsafe this will not escape the html content of your model   http   jsfiddle net n9rQr    lt div ng-app ng-controller  MyCtrl  gt       lt ul gt       lt li ng-repeat   opt in opts   ng-bind-html-unsafe  opt text  gt             opt text         lt  li gt       lt  ul gt        lt p gt   opt   lt  p gt   lt  div gt    This works  anyway you should be very careful when using unsanitized html content  you should really trust the source of the content

User · Answer

use ng-bind-html-unsafe  it will apply html with text inside like below        lt li ng-repeat   opt in opts  ng-bind-html-unsafe  opt text   gt             opt text         lt  li gt

User · Answer

It goes like ng-bind-html-unsafe  opt text      lt div ng-app ng-controller  MyCtrl  gt       lt ul gt       lt li ng-repeat   opt in opts  ng-bind-html-unsafe  opt text   gt             opt text         lt  li gt       lt  ul gt        lt p gt   opt   lt  p gt   lt  div gt    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    lt li ng-repeat   opt in opts  ng-bind-html-unsafe  getContent opt    gt          opt value     lt  li gt    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

[javascript] angular.js ng-repeat li items with html content

Examples related to javascript

Examples related to html

Examples related to angularjs