Change text color to an specific character using angular and jquery

Question

I want to change the text color of a row in an HTML table using jQuery if it founds this characther "-". The data is coming from a webservice and I'm using AngularJS but I don't know if I have to use directive to do this.

This is my angular expression:

<td>{{example.name}}</td>

and this is what I tried:

  $('.example.name').each(function() {
    if($(this).contains(-)) {
       $(this).css('color', 'red');
    }
  });

I put this code inside the controller that is bringing the data but it's not working, that's when I thought in directives.

So how can I achive this

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-29 18:23:45Z

2

You forgot to add " around - making it an operator and a Syntax Error. Change it to:

if ($(this).contains("-")) {
//-------------------^-^

The only place you can use without " is:

if ($(".some-class p:contains(-)")) {

Sorry I am not sure about the angular way! :(

answered Dec 29, 2015 at 18:23

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kennechu Over a year ago

Don't worry, everything helps. Thanks for your time ;)

Pankaj Parkar · Accepted Answer · 2015-12-29 18:24:06Z

2

You could use ng-class/ng-style directive to implement the same thing in angular way. ng-class is the preferable way to it.

HTML

<td ng-class="{red: doHighlight(exmaple.name)}" >
  ...content...
</td>

CSS

.red {
  color: red;
}

Controller

$scope.doHighlight = function(name){
   return name.contains('-');
}

answered Dec 29, 2015 at 18:24

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

6 Comments

Your Friend Ken Over a year ago

Using the templating engine is probably the way to go.

Your Friend Ken Over a year ago

I was just saying your answer is probably better than mine. Using Angular instead of jQuery. Keeping styling and layout in the template just seems cleaner.

Pankaj Parkar Over a year ago

@YourFriendKen yes..make use of inbuilt directive rather than going for jQuery

kennechu Over a year ago

Thank's to both @YourFriendKen I was hoping to do this the "angular" way

kennechu Over a year ago

@PankajParkar Me again, I was trying something like this: ng-style="{$('p:contains('-')').css('color','red')}" but not getting any result and I don't understand why. Also the solution you gave only works for example.name expression right? If I want to evaluate for any row in the table should be something like Ken said $("td:contains(-)").css("color","red"); no?

|

Your Friend Ken · Accepted Answer · 2015-12-29 18:30:07Z

1

$("td:contains(-)").css("color","red");

Did you try using the jQuery selector :contains()?

https://api.jquery.com/contains-selector/

You may also want to add a class to the <td> elements that you want to query.

<td class="example-name">{{example.name}}</td>

Then change the query:

$("td.example-name:contains(-)").css("color","red");

edited Dec 29, 2015 at 18:30

answered Dec 29, 2015 at 18:24

Your Friend Ken

8,8923 gold badges34 silver badges44 bronze badges

1 Comment

kennechu Over a year ago

This will work, now I think this should go inside a directive right? Because if I put that line inside between a <script> tag is not working..

Collectives™ on Stack Overflow

Change text color to an specific character using angular and jquery

3 Answers 3

1 Comment

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related