Angularjs 我们如何在重复中的第n个字母下面划线？

我在我的项目中有一个要求。 我在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" }];

现在我想用带有下划线的第n个字母的html打印标题，其中n是“下划线键”

我的html：

<div class="titleCont">
    <div ng-repeat="title in titleObject">{{title.title}}</div>  
</div>

{{title.title}

我得到的输出：

标题1

副标题

标题文本

一些头衔

更多标题

我的要求是：

T̲itle1

Su̲b-标题

健康的文本

那么我的头衔呢

莫尔头衔

---

使用指令可以是：

.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)
    }
  }
})

.directive（'underline'，function（）{
返回{
范围：{
下划线：“=”
},
链接：功能（范围、元素）{
var html=scope.underline.title.replace（新的RegExp（“（“+scope.underline.underlinekey+”），“$1”）；
html（html）
}
}
})

---

带属性

如果要将html与绑定，必须先运行它。除此之外，您可以按照通常的方式生成带有字符串替换的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>"
        )
    );
};

$scope.underlineTitle=函数（标题）{
返回$sce.trustAsHtml(
title.title.replace(
title.Undernekey，
“”+title.underlinekey+“”
)
);
};

确保只使用您信任/实际生成的HTML执行TIH

---

我喜欢这个解决方案。我建议为条目和替换项使用属性，因为这将使您能够在没有特定对象定义的情况下使用该指令。@ExplosionPills很好，在这种情况下，您可以建议使用两个属性，或者只使用key？、

title

作为属性或

.text（）

？两个属性对我来说最有意义

<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>"
        )
    );
};