在 Angular 模板中设置类值

Posted 2023-03-05

【中文标题】在 Angular 模板中设置类值

【英文标题】：Setting class values in Angular template

【发布时间】：2014-04-25 09:41:31

【问题描述】：

我是一个 Angular 新手，我正在努力解决我认为非常简单的事情。

我有一个模板用于我的应用程序的只读版本的表单。此模板显示将根据其值设置样式（文本/背景颜色）的状态字段，例如

'新问题' - 橙色 '进行中' - 绿色 '过期' - 红色

等等……

我的 css 是这样的；

.status-bar padding: 3px; border: solid 1px #333
.new-issue background-color: orange; color: #000
.in-progress background-color: green; color: #fff
.overdue background-color: red; color: #fff

问题状态字段可通过控制器获得，我使用类似这样的代码来显示它。

<div class="status-bar">issue.status</div>

一切正常。

然后我天真地尝试简单地将类名插入为表达式，例如

<div class="status-bar issue.status">issue.status</div>

认为这会给我这样的输出..

<div class="status-bar overdue">overdue</div>

但它不起作用。我查看了 ng-class 指令和其他选项，但无法解决。

理想情况下，我需要一个解决方案，允许我根据值附加/插入类名（而不是像 ng-class 那样的真/假）。所以我希望我的输出 html 如下所示......

<div class="status-bar in-progress">In Progress</div>

或

<div class="status-bar new-issue">New Issue</div>

或

<div class="status-bar overdue">overdue</div>

等等……

状态值的范围可能会改变，所以我的类名必须按照上述模式计算

例如，

<div class="status-bar another-status">Another Status</div>

所以我需要一种方法来连字符并小写我的 issue.status 值，然后将其添加为类名。我认为指令是前进的方向，这将是理想的，因此我可以在其他视图中使用它。

这在 jQuery 等中很容易做到……但我看不到 'Angular' 的方法？！

非常感谢您提供的任何帮助...

【参考方案1】：

ng-class 与 自定义过滤器 是您正在寻找的...

HTML

<h1 ng-class="class1">class1 | titleCase</h1>

JS

app.filter('titleCase', function () 
  return function (input) 
    var words = input.split('-');
    for (var i = 0; i < words.length; i++) 
      words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
    
    return words.join(' ');
  
);

这里正在工作PLUNKER...

【参考方案2】：

ng-class 应该可以工作：

<div class="status-bar" ng-class="issue.status">issue.status</div>

工作小提琴：http://jsfiddle.net/w2SFr/2/

【讨论】：

谢谢，但这只允许我使用问题状态“原样”作为类名。我需要将“进行中”等状态值连字符并小写为“进行中”

只需添加一个自定义过滤器就可以了.. 很简单。

【参考方案3】：

您正在寻找的可能是http://docs.angularjs.org/api/ng/directive/ngClass。你可能还想看看AngularJS ngClass conditional