angularjsの範囲のテキストを強調表示

Question

現在、この配列と一致するものがあれば、リスト内の単語をハイライトするコードがあります。

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

このコードはもう必要ありません。私は "マーキー"効果を行うライブラリの効果を失うことなく、配列からクラス ".marque"のテキストをハイライトする必要があります。どうすればいい？

https://jsfiddle.net/mafa4hro/

<div ng-app="testApp" ng-controller="testCtrl"> 
    <li ng-repeat="item in data "> 
    <span ng-bind-html="item.title | highlight:arrayFilter"></span> 
    </li> 
    <div class='marquee' >mom is beautifull</div> 
</div> 

    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'), '<spanclass="highlightedText">$&</span>') 
    } 
    }) 
    return $sce.trustAsHtml(text); 

    } 
}); 

Answer 1

あなたはへfilterに二引数を追加することができ、このようなマーキー要素を示しています

<div class='marquee' ng-bind-html="text | highlight:arrayFilter:true"></div> 

そしてあなたがチェックできfilter内部このフラグとmarquを適用EE：

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'), '<span class="highlightedText">$&</span>') 
 
     } 
 
    }) 
 
    if (isMarquee) 
 
     //marquee 
 
     $('.marquee').marquee({ 
 
     duration: 5000 
 
     }); 
 
    return $sce.trustAsHtml(text); 
 

 
    } 
 
});

.highlightedText { 
 
    background: yellow; 
 
} 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.3.94/jquery.marquee.min.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 
 

 

 

 
<div ng-app="testApp" ng-controller="testCtrl"> 
 
    <li ng-repeat="item in data "> 
 
    <span ng-bind-html="item.title | highlight:arrayFilter"></span> 
 
    </li> 
 

 
    <div class='marquee' ng-bind-html="text | highlight:arrayFilter:true">mom is beautifull</div> 
 
</div>