突出显示angularjs中跨度的文本

目前我有一个代码，如果与此数组匹配，则突出显示列表中的单词。

$scope.arrayFilter=["is","mom","beautifull",'beer']; 

我不再需要这段代码。 我只需要从数组中突出显示类“.marque”的文本，而不会失去执行“选取框”效果的库的效果。 我该怎么做？

https://jsfiddle.net/mafa4hro/

 
 
  
 
mom is beautifull
 
 var app = angular.module('testApp',[]); app.controller('testCtrl',function($scope){ $scope.arrayFilter=["mom","is","beautifull",'beer']; $scope.data = [{ title: "mom is beautifull" }, { title: "my mom is great" }, { title: "I hate the matematics" }]; //marquee effect $('.marquee').marquee({ duration: 5000 }); $('.marquee') .bind('finished', function(){ console.log('finish') $(this).html('If it works, i need a beer') //Apply marquee plugin again .marquee({ duration: 5000, }) }) }); app.filter('highlight', function($sce) { return function(text, arrayFilter) { angular.forEach(arrayFilter, function(key, value) { if (text.includes(key)) { text = text.replace(new RegExp(key, 'gi'), '$&') } }) return $sce.trustAsHtml(text); } }); 

Answer 1

您可以向filter添加第二个参数，以指示这样的选框元素：

在 filter 内部 ，您可以检查此标志并应用选取框：

 if (isMarquee) $('.marquee').marquee({duration: 5000}); 

请参阅下面的演示并updated jsfiddle ：

 var app = angular.module('testApp', []); app.controller('testCtrl', function($scope) { $scope.arrayFilter = ["is", "mom", "beautifull", 'beer', 'hate']; $scope.data = [{ title: "mom is beautifull" }, { title: "my mom is great" }, { title: "I hate the matematics" }]; $scope.text = 'If it works, i need a beer'; }); app.filter('highlight', function($sce) { return function(text, arrayFilter, isMarquee) { angular.forEach(arrayFilter, function(key, value) { if (text.includes(key)) { text = text.replace(new RegExp(key, 'gi'), '$&') } }) if (isMarquee) //marquee $('.marquee').marquee({ duration: 5000 }); return $sce.trustAsHtml(text); } }); 

 .highlightedText { background: yellow; } .marquee { width: 300px; overflow: hidden; border: 1px solid #ccc; } 

    
 
  
 
mom is beautifull