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

Question

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

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

当我使用 Chrome 开发人员工具查看我的 DOM 时，我看到以下内容:

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

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

Answer 1

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

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

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

ng-pristine - 输入没有被修改

ng-dirty - 输入已被修改

因此，如果您可以将 CSS 修改为基于 .ng-dirty 类，那么您就可以开始了。

2. 使用带有 form 标志的 $dirty 指令。

当您使用 form 元素时，Angular 会在作用域上分配一个与表单上的 FormController 属性同名的 name instance；表单中的每个输入都作为一个属性附加到该 FormController 实例上，同样与输入上的 name 属性同名。例如，

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

给你

$scope.myForm.myInput

每个输入属性都有自己的一些属性，包括 $pristine 和 $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/