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

我在表格中对以下内容进行了编码：

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

当我使用Chrome developer工具查看我的DOM时，我看到以下内容：

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

---

如何使输入发生更改时，该输入添加了一个类？

看看这个JSFIDLE：

主要思想是使用

$scope.$watch

监视输入框的更改。我给它一个id为

rowTitle

，并使用一个名为

watchRowTitle

的指令来监视对

$scope.row.title

的更改，并添加一个类“red”，每当输入框中的文本等于“error title”时，该类就会将文本染成红色

在指令中进行DOM操作可能是一种很好的做法。这里，

watchRowTitle

指令返回一个包含4个键的对象：

• 模板-替换

  监视行标题

  标记的html。我们这里不需要这个
• 作用域-这里我们使用一个独立的作用域。基本上，“=”在

  watch row title

  指令内的

  scope.title

  和

  MyCtrl

  控制器内的

  $scope.row.title

  值之间建立了双向数据绑定
• restrict-我们给它一个值

  E

  ，它代表元素。因此，这限制了html标记中

  监视行标题

  指令的使用，换句话说：

• 链接-这是链接功能，有趣的事情发生在这里。在这里，我们在

  title

  上使用

  scope.$watch

  。我们必须提供一个包含两个参数的函数

  newValue

  和

  oldValue

  （您可以将它们命名为其他名称，但以这种方式命名更有意义），该函数保存被监视变量的新值和旧值。每当

  scope.title

  变量变为字符串“Error title”时，它就会将CSS类“red”添加到id为

  rowTitle

  的输入框中（注意输入框中的文本是如何变为红色的）。否则，它将删除该CSS类。这一部分是使用JQuery完成的

HTML:

JavaScript:

angular.module('myApp', [])
    .controller('MyCtrl', [
        '$scope',
        function ($scope) {
            $scope.row = {};
        }
    ])
    .directive('watchRowTitle', [
        function () {
            return {
                template: '',
                scope: {
                    title: '='
                },
                restrict: 'E',
                link: function(scope, element, attr) {
                    scope.$watch('title', function(newValue, oldValue) {
                        if (newValue === 'wrong title') {
                            $('#rowTitle').addClass('red');
                        } else {
                            $('#rowTitle').removeClass('red');
                        }
                    });
                }
            };
    }
]);

---

有两种解决此问题的好方法：

1。使用Angular放在元素上的内置

ng dirty

类。

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

• ng pristine

  -输入未被修改

• ng dirty

  -输入已被修改

因此，如果您可以将CSS修改为基于

.ng dirty

类，那么您就可以开始了

2。使用带有

$dirty

标志的

表单

指令。

使用

表单

元素时，Angular在作用域上指定一个与表单上的

名称

属性同名的；表单中的每个输入都作为属性附加到该FormController实例，并且与输入上的

name

属性同名。比如说,

给你

$scope.myForm.myInput

每个输入属性都有自己的一些属性，包括

$pristine

和

$dirty

；这些工作方式与上面列出的CSS类类似。因此，您可以检查输入上的

$dirty

标志，并使用

ng class

有条件地将类应用于元素。例如：

您可以在这里找到一个工作示例：

HTML

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

---

检查更改输入时自动添加到输入中的

ng dirty

类。然后，您可以将您特定的css属性交给

ng dirty

类，如果您没有jQuery怎么办？您必须拥有lite jQuery或带有AngularJS的Zepto；）绝对没有，但你拥有的是jqLite。因此，问题实际上是如何使用jqLite？“Angular是否使用jQuery库？是的，Angular可以使用jQuery，前提是在应用程序启动时，jQuery存在于应用程序中。如果jQuery不存在于脚本路径中，Angular将返回到它自己的jQuery子集实现，我们称之为jqLite。”没错。所以我在问你如何用jqLite做到这一点？

angular.module('myApp', [])
    .controller('MyCtrl', [
        '$scope',
        function ($scope) {
            $scope.row = {};
        }
    ])
    .directive('watchRowTitle', [
        function () {
            return {
                template: '',
                scope: {
                    title: '='
                },
                restrict: 'E',
                link: function(scope, element, attr) {
                    scope.$watch('title', function(newValue, oldValue) {
                        if (newValue === 'wrong title') {
                            $('#rowTitle').addClass('red');
                        } else {
                            $('#rowTitle').removeClass('red');
                        }
                    });
                }
            };
    }
]);

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

$scope.$watch('row.title', function(newValue) {
   // Add CSS class on input
   $('#inputTitle').addClass('YourCSSClass');
}, true);