У меня есть модель, которая возвращается с сервера, который содержит html вместо текста (например, тег b или тег i)
когда я использую ng-repeat для создания списка из него, он показывает html как чистый текст, есть ли встроенный фильтр или директива, которые помещают html внутри элементов li или нет?
Я просмотрел документацию, но, поскольку я все еще очень новичок в этом, мне трудно найти его.
нг-повтор:
<li ng-repeat="opt in opts">
JSFiddle:
Это выглядит как 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>
Или вы можете определить функцию в области видимости:
$scope.getContent = function(obj){
return obj.value + " " + obj.text;
}
И используйте его так:
<li ng-repeat=" opt in opts" ng-bind-html-unsafe="getContent(opt)" >
{{ opt.value }}
</li>
Обратите внимание, что вы не можете сделать это с помощью тега option: Могу ли я использовать теги HTML в параметрах для отдельных элементов?
Обратите внимание, что ng-bind-html-unsafe больше не поддерживается в rc 1.2. Вместо этого используйте ng-bind-html. Смотрите: С удалением ng-bind-html-unsafe, как мне добавить HTML?
Вы можете использовать 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>
Это работает, в любом случае вы должны быть очень осторожны при использовании контента unsanitized html, вы должны действительно доверять источнику контента.
использовать ng-bind-html-unsafe
он применит html с текстом внутри, как показано ниже:
<li ng-repeat=" opt in opts" ng-bind-html-unsafe="opt.text" >
{{ opt.text }}
</li>
Если вы хотите, чтобы какой-либо элемент содержал значение, являющееся HTML, взгляните на ngBindHtmlUnsafe.
Если вы хотите изменить параметры стиля в нативном выборе, это невозможно.
Вот директива из официальных примеров 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>
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);
});
}