过滤器更改句子中单词的颜色angularjs

Question

我想更改句子中单词的颜色我该怎么做？

控制器代码：

app.controller("myController",function($scope){ 

       $scope.phrase="This is a bad phrase"; 
    }); 

    app.filter('censor', function(){ 
     return function(input){ 
      var cWords = ['bad', 'evil', 'dark']; 
      var out = input; 
      for(var i=0; i<cWords.length;i++){ 
       out = out.replace(cWords[i], <span class="blue"></span>); 
      } 
      return out; 
     }; 
    }) 

我的观点：

{{phrase | censor}} 

Answer 1

首先，如果你想在你的过滤器绑定HTML，你需要使用ngSanitize并与指令结合：纳克-bind-HTML而不是{{}}，这样的：

<p ng-bind-html="ctrl.phrase | censor"></p> 

在您的JS文件，你需要检查，如果这句话包含3个n您想要过滤的任何单词，然后更新短语。

angular 
    .module('app', ['ngSanitize']) 
    .controller('MainCtrl', function() { 
    var ctrl = this; 

    ctrl.phrase = 'This is a bad phrase'; 
    }) 
    .filter('censor', function() { 
    return function(input) { 
     var cWords = ['bad', 'evil', 'dark']; 
     var splitPhrase = input.split(' '); 
     var out = splitPhrase.reduce(function(acc, curr) { 
     if (cWords.indexOf(curr) > -1) { 
      acc.push('<span class="blue">' + curr + '</span>'); 
     } else { 
      acc.push(curr); 
     } 

     return acc; 
     }, []); 

     return out.join(' '); 
    } 
    }); 

您可以在这里找到一个例子：http://jsbin.com/koxekoq/edit?html,js,output