使用angular和jquery将文本颜色更改为特定字符

时间:2022-11-13 18:45:44

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.

我想使用jQuery更改HTML表中行的文本颜色,如果它找到了这个字符“ - ”。数据来自web服务,我正在使用AngularJS,但我不知道是否必须使用指令来执行此操作。

This is my angular expression:

这是我的角度表达:

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

{{example.name}}

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

那么我怎么能做到这一点呢

3 个解决方案

#1


2  

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

您忘了添加“around - 使其成为运算符和语法错误。将其更改为:

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! :(

对不起,我不确定角度方式! :(

#2


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.

您可以使用ng-class / ng-style指令以角度方式实现相同的操作。 ng-class是最好的方式。

HTML

HTML

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

CSS

CSS

.red {
  color: red;
}

Controller

调节器

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

#3


1  

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

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

您是否尝试使用jQuery选择器:contains()?

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

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");

#1


2  

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

您忘了添加“around - 使其成为运算符和语法错误。将其更改为:

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! :(

对不起,我不确定角度方式! :(

#2


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.

您可以使用ng-class / ng-style指令以角度方式实现相同的操作。 ng-class是最好的方式。

HTML

HTML

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

CSS

CSS

.red {
  color: red;
}

Controller

调节器

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

#3


1  

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

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

您是否尝试使用jQuery选择器:contains()?

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

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");