angular.js ng-repeat li项目带有html内容

Question

我有一个从服务器返回的模型,它包含html而不是文本(例如ab标签或i标签)
当我使用ng-repeat构建一个列表时,它将html显示为纯文本,是否有内置过滤器或指令,将html放在li项目内？
我查看了文档,但由于我还是很新,所以我很难找到它.

NG-重复:

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

的jsfiddle:

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

Answer 1

它像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/

或者您可以在范围内定义函数:

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

并以这种方式使用它:

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

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

请注意,您无法使用option标记:可以在select元素的选项中使用HTML标记吗？

Answer 2

请注意,rc 1.2中不再支持ng-bind-html-unsafe.请改用ng-bind-html.请参阅:删除ng-bind-html-unsafe后,如何注入HTML？

Answer 3

您可以使用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>

无论如何,在使用unsanitized html内容时你应该非常小心,你应该真正信任内容的来源.