Question

我的项目有要求。我在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是“underlinedkey”

我的HTML：

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

我得到的输出：

标题1

子标题

标题文字

一些标题

更多标题

我的要求是：

标题1

子标题

标题文字

一些标题

更多标题

Answer 1

使用指令可以是：

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

<强> Demo 1

带有属性的

Demo 2

Answer 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。

http://plnkr.co/edit/0pFGjaKYxN87TvQZbw6l?p=preview

我们如何在角度ng-repeat中强调第n个字母？

2 个答案: