Toggle part of a text to bold under one condition

Question

I need help changing the color of a specific part of a text. The thing is, I have a string that I broke into several separate sentences to get the relevant phrases. The phrases are tuple-shaped (phrase, relevance). I want to concatenate the string again but, in html, change the color of the parts that have relevance 'yes'. Is it possible to do this within the same div? I am using Angularjs.

Answer 1

You can use the directives ng-class or ng-style to conditionally apply classes and styles to an HTML element.

For your problem, if I understand correctly, using the directive ng-class the solution would be something like:

<div ng-repeat="frase in vm.frases">
  <span ng-class="{'my-bold-class': frase.relevante === true}">
    <!-- A classe my-bold-class será aplicada somente e somente se frase.relevante for verdadeiro  -->
    <!-- Independente da do valor de frase.relevante, a mensagem definida em frase.texto será exibida -->
    {{frase.texto}}
  </span>
</div>

Being the variable frases defined as:

frases = [
  {
    texto: 'Esta é uma mensagem importante',
    relevante: true 
  },{
    texto: 'Esta não é uma mensagem importante',
    relevante: false
  }
]

You can check the result in this Plunker.

Would that be something you’d like?