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

问题描述

我有一个从服务器返回的模型，它包含html而不是文本（例如ab标签或i标签）。

当我使用ng-repeat从列表中构建一个列表时它将html显示为纯文本，是否有内置的过滤器或指令将html的内容放入li项目中？
我查看了文档，但由于我还是很新的，所以我很难找到它。

ng-repeat：

p>

 < li ng-repeat =opt in opts> 
  

JSFiddle：

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

解决方案

它像 ng-bind-html-unsafe =opt.text：

 < div ng-app ng-controller =MyCtrl> 
< ul> 
< li ng-repeat =opt in optsng-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 optsng-bind-html-unsafe =getContent（opt）> 
 {{opt.value}} 
< / li> 
  

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

请注意，您无法使用选项 tag： Can我在选择元素的选项中使用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屋！