Question

我是一个角色新手，我正在努力做一些我认为非常简单的事情。

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

＆＃39;新问题＆＃39; - 橙子＆＃39;正在进行中＆＃39; - 绿色＆＃39;逾期＆＃39; - 红色

等...

我的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那样的真/假）。因此，我希望我的oputput HTML与以下内容类似......

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

OR

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

OR

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

等...

状态值的范围可能会发生变化，因此必须按照上述模式计算我的类名

例如，

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

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

在jQuery等事实之后这很容易做到，但是我无法看到＆＃39; Angular＆＃39;这样做的方法？！

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

Answer 1

ng-class应该有效：

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

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

Answer 2

您正在寻找带有自定义过滤器的

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 ...

Answer 3

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

在Angular模板中设置类值

3 个答案: