Question

如何在不破坏单词或修改实际sliderNote的情况下为“this”和“note”添加字样？

JS：

$scope.sliderNote="This is my note";

HTML：

<div class="sliderNote">
      {{sliderNote}}
      </div>

的CSS：

.sliderNote {
  font-size:12px;
  color:gray;

}

Answer 1

您可以通过创建自定义过滤器来实现此目的

脚本中的

定义控制器和过滤器

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope) {
  $scope.sliderNote="This is my note";
  $scope.selectedWords = ["This","note"];
});

app.filter("underline", function($sce){
    return function(txt, phrase){
       if(phrase instanceof Array){
          if(txt === undefined){
             return;
        }
        for (var i = 0; i < phrase.length; i++) {
            var key = phrase[i];
          txt = txt.replace(new RegExp('('+key+')', 'gi'),'<span style="text-decoration: underline;">$1</span>');
        };  
       }
    return $sce.trustAsHtml(txt);
  };
});

视图中的

使用data-ng-bind-html

 <!DOCTYPE html>
 <html ng-app="app">

 <head>
  <script  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.j s"></script>
</head>

 <body ng-controller="mainCtrl">
   <div class="sliderNote" data-ng-bind-html="sliderNote | underline :  selectedWords">

 </body>
 </html>

Plunker：http://plnkr.co/edit/fLSzpvWwFXQaAs5dcjBf?p=preview

Answer 2

您可以创建一个可以应用于{{ slideNote | underline:'this,note' }}的过滤器。

您可以从slideNote将输入带入过滤器，从'this,note'参数中突出显示单词，将字符串拆分为单词，然后将这些单词中的任何一个包装在输入字符串中一个<u></u>标记。

最后，您要返回过滤器的输出，并确保将过滤器设置为标记为安全，以便HTML不会被转义。

过滤器文档可以在https://docs.angularjs.org/guide/filter

找到

Answer 3

使用ng-bind-html作为一个函数，该函数将段落作为输入并返回带有未标注单词的html：

<div class="sliderNote" ng-bind-html="underlineWords(sliderNote)">

      </div>

JS：

$scope.sliderNote="This is my note";

$scope.underlineWords = function (text){
    text.replace(" this ", " <u>this</u> ");
    text.replace(" note ", " <u>note</u> ");
    return text;
}

强调角模板中的单词

3 个答案: