angular.js ng-repeat li 带有 html 内容的项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19111337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular.js ng-repeat li items with html content
提问by J.Pip
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.
我有一个从服务器返回的模型，它包含 html 而不是文本（例如 ab 标签或 i 标签），
当我使用 ng-repeat 从中构建一个列表时，它将 html 显示为纯文本，是否有内置过滤器或指令是否将 html 放入 li 项目中？
我查看了文档，但由于我对它仍然很陌生，因此很难找到它。
ng-repeat:
ng-重复：
<li ng-repeat="opt in opts">
JSFiddle:
JSFiddle：
回答by Cherniv
It goes like ng-bind-html-unsafe="opt.text":
它是这样的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>
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>
Note that you can not do it with an optiontag: Can I use HTML tags in the options for select elements?
请注意，您不能使用option标签来做到这一点：我可以在选择元素的选项中使用 HTML 标签吗？
回答by Peter Drinnan
Note that ng-bind-html-unsafe is no longer suppported in rc 1.2. Use ng-bind-html instead. See: With ng-bind-html-unsafe removed, how do I inject HTML?
请注意，rc 1.2 不再支持 ng-bind-html-unsafe。请改用 ng-bind-html。请参阅：删除 ng-bind-html-unsafe 后，如何注入 HTML？
回答by Atropo
You can use NGBindHTMLor NGbindHtmlUnsafethis will not escape the htmlcontent of your model.
您可以使用NGBindHTML或NGbindHtmlUnsafe这不会转义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>
This works, anyway you should be very careful when using unsanitizedhtmlcontent, you should really trustthe source of the content.
这是有效的，无论如何您在使用unsanitizedhtml内容时应该非常小心，您应该真正信任内容的来源。
回答by v.babak
Here is directive from the official examples angular docsv1.5 that shows how to compile html:
这是来自官方示例angular docsv1.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);
}
);
};
});
Usage:
用法：
<div compile-html="item.htmlString"></div>
It will insert item.htmlString property as html any place, like
它会在任何地方插入 item.htmlString 属性作为 html，比如
<li ng-repeat="item in itemList">
<div compile-html="item.htmlString"></div>
回答by Nitu Bansal
use ng-bind-html-unsafe
用 ng-bind-html-unsafe
it will apply html with text inside like below:
它将应用带有文本的 html，如下所示：
<li ng-repeat=" opt in opts" ng-bind-html-unsafe="opt.text" >
{{ opt.text }}
</li>
回答by Nikos Paraskevopoulos
If you want some element to contain a value that is HTML, take a look at ngBindHtmlUnsafe.
如果您希望某个元素包含 HTML 值，请查看ngBindHtmlUnsafe。
If you want to style options in a nativeselect, no it is not possible.
如果您想在本机选择中设置选项的样式，不，这是不可能的。
回答by Asqan
ng-bind-html-unsafe is deprecated from 1.2. The correct answer should be currently:
ng-bind-html-unsafe 从 1.2 开始被弃用。目前正确答案应该是：
HTML-side: (the same as the accepted answer stated):
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>
But in the controller-side:
但是在控制器端：
myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
// ...
$scope.opts.map(function(opt) {
opt = $sce.trustAsHtml(opt);
});
}
