angular.js ng-repeat li 带有 html 内容的项目 [英] angular.js ng-repeat li items with html content

问题描述

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

ng-重复:

JSFiddle:

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

解决方案

它就像 ng-bind-html-unsafe="opt.text":

<ul><li ng-repeat="选择加入 opts" ng-bind-html-unsafe="opt.text" >{{ opt.text }}<p>{{opt}}</p>

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

或者你可以在作用域内定义一个函数:

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

并以这种方式使用它:

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

请注意，您不能使用 option 标签执行此操作:我可以在选择元素的选项中使用 HTML 标签吗?

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/

解决方案

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?

这篇关于angular.js ng-repeat li 带有 html 内容的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！