html - 当变量变为真时，angular js 添加 css

Question

我是 angular js 的新手。提交空表单时，我试图将字段的边框更改为红色。我编写了 Controller ，它在提交有效表单时处理输入，并在提交无效表单时将字段 (invalidFormSubmitted) 设置为 true。

我尝试了下面的 css 但它不起作用

 input.invalidFormSubmitted{
  border-bottom: 0.125rem solid #e42105;
  }

我也尝试过 ng-submitted，但没有成功。

当此变量设置为 true 时，如何使字段边框变为红色？

提前致谢。

Answer 1

你正在寻找ng-class

angular.module('app',[]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<style>
input.invalidFormSubmitted{
 border:1px solid red;
}
</style> 
<div ng-app="app">
<form name="myForm">
  <input type="text" required ng-model="foo" name="sample" ng-class="{'invalidFormSubmitted':myForm.sample.$invalid}" />
</form>
</div>

如您所见，只要此处的输入中没有值，就会应用该类