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

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

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

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

• ng-pristine- 输入没有被修改
• ng-dirty- 输入已被修改

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

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

当你使用一个form元素时，Angular 会在范围上分配一个与表单上的属性同名的FormController实例；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

Take a look at this jsfiddle: http://jsfiddle.net/hNrEV/2/

The main idea is using $scope.$watch to watch for changes to the input box. I gave it an id of rowTitle, and used a directive called watchRowTitle that watches for changes to $scope.row.title, and adds a class 'red' that colors the text red whenever the text in the input box is equal to 'wrong title'.

It is probably good practice to do DOM manipulation in directives. Here, the watchRowTitle directive returns an object with 4 keys:

• template - the html that replaces the watch-row-title tag. we dont need this here
• scope - Here we make use of an isolated scope. Basically, the '=' establishes a 2-way data binding between between scope.title inside the watch-row-title directive and the $scope.row.title value inside the MyCtrl controller.
• restrict - We give it a value of E, which stands for element. So this restricts the use of the watch-row-title directive within html tags, in other words: <watch-row-title></watch-row-title>
• link - this is the link function, where the interesting stuff happens. In here, we use scope.$watch on title. We have to supply a function with 2 parameters newValue and oldValue (you can name them to something else, but naming them this way is more meaningful), that holds the new and old values of the variable being watched. Whenever the scope.title variable becomes the string 'wrong title', it adds the CSS class 'red' to the input box with id rowTitle (notice how the text in the input box turns red). Otherwise, it removes that CSS class. This portion is done using 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);