在角模板中加下劃線

如何在不打斷單詞或修改實際滑塊注的情況下強調單詞「this」和「note」？在角模板中加下劃線

JS：

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

HTML：

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

CSS：

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

}

來源

2016-07-05 Angular

爲什麼你不想要打破這個詞？ –

因爲如果我有一個段落。我有其他變量有長文本 – Angular

你能詳細說明你想做什麼嗎？你想強調某些指數的第一個也就是最後一個單詞，或每一個單詞的出現或單詞， –

你可以創建你可以適用於{{ slideNote | underline:'this,note' }}過濾器。

您將採取輸入到過濾器從slideNote，走的話從'this,note'參數突出，分割字符串進言，然後封裝任何的那些話你輸入字符串中有<u></u>標籤。

最後，您將返回過濾器的輸出並確保將過濾器設置爲安全標記，以便HTML不會被轉義。

篩選文檔可以在這裏找到https://docs.angularjs.org/guide/filter

來源

2016-07-05 17:24:04 Soviut

，你可以在腳本創建自定義過濾器

實現這個定義控制器和視圖中的數據使用-NG過濾

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

-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

來源

2016-07-05 17:35:20 Deep

使用NG綁定，HTML與作爲輸入你的款，並返回HTML與undelined詞功能：

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

來源

2016-07-05 17:36:19

您能舉一個例子說明我如何處理的單詞嗎？ – Angular

text.replace（「word」，「 word」） –

或text.replace（「word」，「 word」），使用空格確保單詞不是較長單詞的子字符串。 –

在角模板中加下劃線

回答

相關問題