У меня есть требование в моем проекте. У меня есть заголовки, загруженные в переменную области с http-вызова:
$scope.titleObject = [{
"title": "Title1",
"underlinekey": "t" }, {
"title": "Sub-Heading",
"underlinekey": "u" }, {
"title": "Heading text",
"underlinekey": "a" }, {
"title": "Some Title",
"underlinekey": "o" }, {
"title": "More Title",
"underlinekey": "r" }];
Теперь я хочу печатать заголовки в html с подчеркнутой n-й буквой, где n - "подчеркнутая кнопка",
Мой html:
<div class="titleCont">
<div ng-repeat="title in titleObject">{{title.title}}</div>
</div>
Результат, который я получаю:
Title1
Подзаголовок
Заголовок текста
Некоторое название
Больше заголовка
Какое мое требование:
Title1
Подзаголовок
Заголовок текста
Некоторое название
Больше заголовка
С директивой может быть:
.directive('underline', function(){
return {
scope: {
underline: "="
},
link: function(scope, element){
var html = scope.underline.title.replace(new RegExp("(" + scope.underline.underlinekey +")"), "<u>$1</u>");
element.html(html)
}
}
})
<div ng-repeat="title in titleObject">
<div underline="title"></div>
</div>
Демо 2 с атрибутами
Если вы хотите связать html с ng-bind-html
вы должны сначала запустить его через $sce.trustAsHtml
. Кроме этого, вы можете просто сгенерировать HTML с заменой строки обычным способом.
<div ng-repeat="title in ::titleObject" ng-bind-html=underlineTitle(title)>
$scope.underlineTitle = function (title) {
return $sce.trustAsHtml(
title.title.replace(
title.underlinekey,
"<u>" + title.underlinekey + "</u>"
)
);
};
Удостоверьтесь, что вы используете только теги с HTML, которым вы доверяете/фактически генерируете.
title
как атрибут или.text()
?