Highlight The Text Of A Span In Angularjs

Currently I have a code that highlights the words in a list if there is a match with this array. $scope.arrayFilter=['is','mom','beautifull','beer']; This piece of code I no lon

Solution 1:

You can add a second argument to the filter to indicate a marquee element like this:

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

And inside the filter you can check for this flag and apply the marquee:

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

See demo below and 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) {
  returnfunction(text, arrayFilter, isMarquee) {
    angular.forEach(arrayFilter, function(key, value) {
      if (text.includes(key)) {
        text = text.replace(newRegExp(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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.3.94/jquery.marquee.min.js"></script><scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script><divng-app="testApp"ng-controller="testCtrl"><ling-repeat="item in data "><spanng-bind-html="item.title | highlight:arrayFilter"></span></li><divclass='marquee'ng-bind-html="text | highlight:arrayFilter:true">mom is beautifull</div></div>