将条件设置为样式表达式

Question

我在angularjs docs中看到ngClass看了不同的问题，但我还是不明白如何用角度来解决我的简单问题......

我在html中有一个简单的按钮

<div class="form-group">
<button ng-click="displayMessage();">Change color</button>
</div>

通过单击此按钮，函数displayMessage分析输入字段（我没有在这里显示）并从三个返回一条消息，它取决于条件。

$scope.message = firstMessage;
$scope.message = secondMessage;
$scope.message = thirdMessage;

此消息是表达式。并在我的app.js中使用“if”进行验证

<div class="form-group message">
{{message}}
</div>

我的问题是根据现在显示的消息来更改消息的样式。 例如，如果它使用firstMessage验证 - 此消息应为绿色。 如果是secondMessage - 黄色...... 等等。

据我所知，我需要使用ng-class进行操作，但我可以想象如果没有好的例子它是如何工作的

Answer 1

将与其关联的消息和类存储在对象中，并在html中使用它

$scope.message = {
 "message" : "firstMessage",
 "class" : "red"

}

HTML中的

<div ng-class="message.class" class="form-group message">
    {{message.message}}
</div>

CSS中的

.red {
  //whatever styling you want
}

请查看plunker