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

【问题标题】：angular.js ng-repeat li items with html contentangular.js ng-repeat 带有 html 内容的项目
【发布时间】：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 标记中。你做不到：stackoverflow.com/questions/11237807/…
我加入了错误的小提琴，我的错现在它是正确的
好的，看看我的回答

标签： javascript html angularjs

【解决方案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>

【讨论】：