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.
ng-repeat:
<li ng-repeat="opt in opts">
JSFiddle:
It goes like 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 option tag: Can I use HTML tags in the options for select elements?
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?
You can use NGBindHTML or NGbindHtmlUnsafe this will not escape the html content of your model.
<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 unsanitized html content, you should really trust the source of the content.
use ng-bind-html-unsafe
it will apply html with text inside like below:
<li ng-repeat=" opt in opts" ng-bind-html-unsafe="opt.text" >
{{ opt.text }}
</li>
Here is directive from the official examples angular docs v1.5 that shows how to compile 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
<li ng-repeat="item in itemList">
<div compile-html="item.htmlString"></div>
If you want some element to contain a value that is HTML, take a look at ngBindHtmlUnsafe.
If you want to style options in a native select, no it is not possible.
ng-repeat directive?ng-bind-html-unsafe is deprecated from 1.2. The correct answer should be currently:
HTML-side: (the same as the accepted answer stated):
<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);
});
}
$sce.trustAsHtml
optiontags. You can not do it: stackoverflow.com/questions/11237807/…