pre-tag中的ng-style with！important not working

Question

<pre ng-style="(errmessage) ? { 'width':'100%', color:'red !important' } : { 'width': '0%' }">{{errmessage}}</em></pre>

如果errormessage不为空，我想使用ng-style覆盖来自指令{{errmessage}}的预标记错误消息的颜色为红色。

Answer 1

最好使用ng-class代替ng-style

在css中添加两个类：

.has-error {
  width:100%;
  color: red !important;
}
.no-error {
  width:0%;
}

并在html

中使用它

<pre ng-class="errmessage ? 'has-error': 'no-error'">{{errmessage}}</pre>