使用jQuery脚本将CSS样式应用于angularjs表达式

Apply CSS style to angularjs expression using jQuery script

本文关键字：应用于 angularjs 表达式 样式 CSS jQuery 脚本 使用      更新时间：2023-09-26

我很困惑，我有一个jquery脚本，如果它在html表中发现负数，就会将文本颜色更改为红色。

   console.log("reading Script");
    $('td:nth-child(3)').each(function() {
      var txt = $(this).text();
    if (txt.indexOf('-') > -1) {
       $(this).css("color", "red");
       console.log("True: " + txt);
    } else {
       $(this).css("color", "green");
       console.log("False: " + txt);
    }
});

这个脚本在一个例子中非常有效，我用"ng repeat d in data"和这个表达式{{d.category}}，但我还有第二个例子，它不起作用，我使用相同的脚本，但角度表达式不同，因为我读到的JSON结构不同，ng repeat="data in PostResponse.result"，我的角度表达式是这样的｛data.merchMetrics.category｝｝，这里我得到的所有值都是绿色的，甚至是负数，所以我没有得到，因为第一个例子完全相同，唯一不同的是数据的结构。

甚至控制台日志的工作方式也不同，在我的第一个示例中，日志如下：

  • 正确：-4
  • 错误10

这是可以的，但在第二个例子中，我在控制台中得到了这个：

  • False：｛｛data.merchMetrics.category｝｝

那么，有什么想法吗？

您在Angular应用程序中使用jQuery编码实践，这会让您头疼——这是因为这些实践违背了Angular的精神，也是因为您无法从Angular中获益。

很可能您遇到了时间问题，在第一种情况下，Angular已经用值替换了模板表达式，而在第二种情况下没有。您不应该这样操作DOM。Angular开发中最重要的部分之一是：您不应该从DOM中解析回数据，ever。

您应该使用ng-class进行条件格式设置。

<td ng-class="{ positive: data.merchMetrics.category < 0, negative: data.merchMetrics.category >= 0}">{{data.merchMetrics.category}}</td>

然后定义字体颜色分别为red和green的两个CSS类positive和negative。

Angular应该与jQuery不同使用的更多背景信息可以在其他资源中找到：

  • http://techn.zumba.com/2014/08/02/angularjs-foget-jquery/

  • http://artandlogic.com/2013/05/angularjs-best-practions-ive-ben-doing-it-wrong-part-3-of3/

  • http://ng-learn.org/2014/01-Dom-Manipopulations/

相关文章：