角。用html内容重复li项目

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.

我有一个模型,从服务器返回包含html而不是文本(例如我标记或标签)当我使用ng-repeat建造了一个列表的html显示为纯文本,有内置的过滤器或指令,把李的html内物品吗?我看了文档，但是因为我对它还不熟悉，所以很难找到它。

ng-repeat:

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

JSFiddle:

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

7 个解决方案

#1

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

它会像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?

注意，您不能使用选项标记:我可以在select元素的选项中使用HTML标记吗?

#2

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?

注意，在rc 1.2中不再支持ng-bind-html-不安全。使用ng-bind-html代替。参见:使用ng-bind- HTML -不安全删除，如何注入HTML?

#3

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

您可以使用NGBindHTML或NGbindHtmlUnsafe，这不会转义模型的html内容。

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.

无论如何，在使用未经消毒的html内容时，您应该非常小心，您应该真正信任内容的来源。

#4

use ng-bind-html-unsafe

使用ng-bind-html-unsafe

it will apply html with text inside like below:

它将使用html，文本如下:

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

#5

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

如果您希望某个元素包含一个HTML值，请查看ngBindHtmlUnsafe。

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

如果您想在本机选择中样式化选项，不可能。

#6

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

以下是官方示例中棱角文档v1.5的指示，展示了如何编译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

它将插入项。html字符串属性作为html的任何位置，比如

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

#7

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

ng-bind-html-不安全是不赞成的。正确答案应该是:

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

HTML-side:(与已接受的答案相同):

<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:

但在controller-side:

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

#1