如果使用 AngularJS 更改输入，如何向输入添加类？

我在表单中编写了以下代码：

<td><input type="text" ng-model="row.title" /></td>

当我使用 Chrome 开发者工具查看 DOM 时，我看到以下内容：

<input type="text" ng-model="row.title" class="ng-pristine ng-valid">

我怎样才能做到这一点，以便当对输入进行更改时，输入会添加一个类？

有两种好方法可以解决这个问题：

1.使用内置的ng-dirtyAngular 在元素上放置的类。

当您更改 Angular 管理的输入时，它会为各种状态的输入添加一些 CSS 类。这些包括：

• ng-pristine- 输入未被修改
• ng-dirty- 输入已被修改

所以，如果你可以修改你的 CSS 以基于.ng-dirty下课了，你可以走了。

2. 使用form指令与$dirty flag.

当您使用form元素，Angular 分配一个FormController实例 http://docs.angularjs.org/api/ng.directive:form.FormController在与名称相同的范围上name表单上的属性；表单内的每个输入都作为属性附加到该 FormController 实例，同样具有与name输入上的属性。例如，

<form name="myForm">
  <input type="text" name="myInput">
</form>

给你

$scope.myForm.myInput

每个输入属性都有一些它的own其上的属性，包括$pristine and $dirty;这些工作就像上面列出的 CSS 类一样。因此，您可以检查$dirty输入和使用上的标志ng-class有条件地将类应用于元素。一个例子：

<div ng-controller="MainController">
  <form name="myForm">
    <input name="myInput" ng-model="model" ng-maxlength="3"
      ng-class="{changed: myForm.myInput.$dirty}">
  </form>
</div>

您可以在这里找到一个工作示例：http://jsfiddle.net/BinaryMuse/BDB5b/ http://jsfiddle.net/BinaryMuse/BDB5b/