Question

我正在尝试找到一种方法来更改div中字母第一次出现的字体颜色。因此，例如，如果字符串是'文本'，我想改变'e'黄色的颜色。然后只有第一个e 会受到影响。 ' e 文字'这就是我所要做的：

<div class="translation-esan-div">
  {{$scope.someValue}}
</div>

当我使用：

访问此元素时

angular.element(document.getElementsByClassName("translation-esan-div"))

返回的text（）值是 {{$ scope.someValue}} ，而不是角度评估文本。

$ scope.someValue中的文本可以是任何内容。我已经有一个指定颜色的预定义css类。要改变的信件将被传递到随附的控制器中。我怎样才能改变特定字母的颜色？

Answer 1

您可以尝试使用JavaScript将所需元素的内容拉出，执行一些简单的旧字符串处理，并将2个嵌套<span>推回到原始容器中，内部替换字母并应用通过将"translation-esan-div"类分配给内部<span>元素来设置样式。

Answer 2

通过ngBindHtml尝试此解决方案：

angular.module('app',['ngSanitize']).controller('MyController', ['$scope', function($scope) {    
    $scope.process = function(letter, text){
        if(letter && text){
            var index = text.indexOf(letter);
            var result = '';
            if(index != -1){
              for(var i = 0 ; i < index; i++)
                result += text[i];
              result += '<span class="yellow">' + text.substr(index, letter.length) + '</span>';
              for(var i = index + letter.length ; i < text.length; i++)
                result += text[i];
              return result;
            }         
        }
        return text;
    }
}]);

.yellow {
    color: yellow;
 }

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script>

<div ng-app='app' ng-controller="MyController">
   letter:
   <input ng-init='letter="e"' ng-model='letter' type='text'/>
   <br>
   text:
   <input ng-init='someValue="The text"' ng-model='someValue' type='text'/>
   <p ng-bind-html="process(letter, someValue)"></p>
</div>

更改第一次出现的字母的字体颜色

2 个答案: