一尘不染

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

angularjs

我有一个从服务器返回的模型,
当我使用ng-
repeat建立一个列表时,它包含html而不是文本(例如ab标签或i标签),它显示html为纯文本,是否有一个内置的过滤器或指令是否将html放入li项目中?
我查看了文档,但是由于我仍然很陌生,因此很难找到它。

ng-repeat:

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

JSFiddle:

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


阅读 175

收藏
2020-07-04

共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/

2020-07-04