첫 번째 문자의 글꼴 색상 변경

Question

첫 번째 문자의 글꼴 색상을 div로 변경하는 방법을 찾으려고합니다. 예를 들어 String이 'The text'이고 'e'의 색을 변경하고 싶었던 경우를 예로들 수 있습니다. 그런 다음 첫 번째 만 영향을받습니다.

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

반환 된 텍스트() 값이 입니다 {{$ scope.someValue : 내가 사용이 요소를 액세스 할 때

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

: '목 전자 텍스트는'이것은 내가 지금까지 무엇을 가지고 }}이고 각도 평가 된 텍스트가 아닙니다.

$ scope.someValue의 텍스트는 무엇이든 될 수 있습니다. 이미 색상을 지정하는 미리 정의 된 CSS 클래스가 있습니다. 변경 될 편지는 동반 컨트롤러로 전달됩니다. 특정 편지의 색깔을 바꾸는 방법에 대해 어떻게 생각합니까?

Answer 1

자바 스크립트를 사용하여 원하는 요소의 내용을 풀고 일반 오래된 문자열 처리를 수행 한 다음 내부 컨테이너가 문자를 대체하고 스타일을 적용하여 원래 컨테이너에 <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>