Toggle part of a text to bold under a condition

-1

I need help to change the color of a specific part of a text. It's the following, I have a string that I broke into several separate sentences to get the relevant phrases. The sentences are of tuple format (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'm using AngularJS.

    
asked by anonymous 09.02.2018 / 19:59

1 answer

0

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

For your problem, if I understood correctly, using the ng-class directive, 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 would like?

    
11.02.2018 / 16:32