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

Posted 2023-03-05

【中文标题】angular.js ng-repeat 带有 html 内容的项目

【英文标题】：angular.js ng-repeat li items with html content

【发布时间】：2013-10-07 07:50:27

【问题描述】：

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

ng-重复：

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

JSFiddle：

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

【问题讨论】：

在您的 jsFiddle 中，您尝试将 html 放入 option 标记中。你做不到：***.com/questions/11237807/…

我加入了错误的小提琴，我的错现在它是正确的

好的，看看我的回答

【参考方案1】：

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

如果您想为 native 选择中的选项设置样式，那是不可能的。

【讨论】：

对不起，我忘记更新小提琴了，如果你现在看，你会看到我想要完成的事情，我很抱歉

以及您如何将它与ng-repeat 指令一起使用？

【参考方案2】：

您可以使用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 内容时应该非常小心，你应该真正信任内容的来源。

【参考方案3】：

就像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 标签：Can I use HTML tags in the options for select elements?

【讨论】：

你如何在表达式中分隔属性，我想通过逗号分隔的列表或数组（[]）但它只显示第一个。例如 ng-bind-html-unsafe="opt.text, opt.value"

这在 Angular 1.2 中仍然有效吗？我注意到小提琴正在使用 1.0

html-bind-unsafe 自 1.2 起已被删除 @see link

【参考方案4】：

使用ng-bind-html-unsafe

它将应用带有如下文本的html：

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

【参考方案5】：

请注意，rc 1.2 不再支持 ng-bind-html-unsafe。请改用 ng-bind-html。见：With ng-bind-html-unsafe removed, how do I inject HTML?

【讨论】：

感谢您的跟进，因为这里几乎所有其他内容都已弃用。

【参考方案6】：

ng-bind-html-unsafe 从 1.2 开始被弃用。目前正确答案应该是：

HTML 方面：（与接受的答案相同）：

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

但在控制器端：

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

【讨论】：

如果你打电话给$sce.trustAsHtml，你应该使用`ng-bind-html`

【参考方案7】：

这是来自官方示例angular docs 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);
      
    );
  ;
);

用法：

<div compile-html="item.htmlString"></div>

它将 item.htmlString 属性作为 html 插入任何地方，例如

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