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 instance指定与表单上name属性相同的名称;表单内的每个输入都作为属性附加到该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/

Answer 2

看看这个jsfiddle：http://jsfiddle.net/hNrEV/2/

主要思想是使用$scope.$watch来监视输入框的更改。我给了它一个rowTitle的id，并使用一个名为watchRowTitle的指令来监视$scope.row.title的更改，并添加一个“红色”类，每当文本中的文本为红色着色输入框等于'错误标题'。

在指令中执行DOM操作可能是一种好习惯。这里，watchRowTitle指令返回一个带有4个键的对象：

模板 - 替换watch-row-title标记的html。我们这里不需要这个
范围 - 这里我们使用隔离范围。基本上，'='在scope.title指令内的watch-row-title和$scope.row.title控制器内的MyCtrl值之间建立了双向数据绑定。
限制 - 我们给它一个E的值，它代表元素。因此，这会限制在html标记中使用watch-row-title指令，换句话说：<watch-row-title></watch-row-title>
链接 - 这是链接功能，有趣的事情发生在这里。在这里，我们在scope.$watch上使用title。我们必须提供一个带有2个参数newValue和oldValue的函数（你可以将它们命名为其他东西，但是用这种方式命名它们更有意义），它保存变量的新旧值观看。每当scope.title变量成为字符串'错误标题'时，它会将CSS类“red”添加到ID为rowTitle的输入框中（请注意输入框中的文本如何变为红色）。否则，它会删除该CSS类。这部分是使用JQuery完成的。

HTML：

<div ng-app="myApp" ng-controller="MyCtrl">
    <input id="rowTitle" type="text" ng-model="row.title" class="ng-pristine ng-valid" />
    <watch-row-title title="row.title"></watch-row-title>
</div>

CSS：

.red {
    color: red;
}

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');
                        }
                    });
                }
            };
    }
]);

Answer 3

<强> HTML

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

<强> JS

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

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

3 个答案: