突出显示angularjs中跨度的文本 [英] 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'];

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

This piece of code I no longer need. I only need to highlight the text of the class ".marque" from the array without losing the effect of the library that does the "marquee" effect. how can I do it?

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

  }
 });

推荐答案

您可以添加秒 过滤器的参数到表示这样的选框元素：

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

<div class='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});

见下面的演示和 更新了jsfiddle ：

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) {
  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>

这篇关于突出显示angularjs中跨度的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！