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并使用指令绑定：ng-bind-html而不是{{}}，如下所示：

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

在你的js文件中，你需要检查这个短语是否包含你要过滤掉的任何单词，然后更新短语。

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

过滤器更改句子angularjs

1 个答案: