如何在不打断单词或修改实际的 sliderNote 的情况下给“this”和“note”加下划线？
JS:
$scope.sliderNote="This is my note";
HTML:
<div class="sliderNote">
{{sliderNote}}
</div>
CSS:
.sliderNote {
font-size:12px;
color:gray;
}
最佳答案
您可以通过创建自定义过滤器来实现这一点
在脚本中定义 Controller 和过滤器
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);
};
});
在 View 中使用 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>
关于javascript - Angular 模板中的下划线词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38209110/