我在我的表格中编写了以下代码:
<td><input type="text" ng-model="row.title" /></td>
当我使用 Chrome 开发人员工具查看我的 DOM 时,我看到以下内容:
<input type="text" ng-model="row.title" class="ng-pristine ng-valid">
我怎样才能做到这一点,以便在对输入进行更改时输入添加了一个类?
我在我的表格中编写了以下代码:
<td><input type="text" ng-model="row.title" /></td>
当我使用 Chrome 开发人员工具查看我的 DOM 时,我看到以下内容:
<input type="text" ng-model="row.title" class="ng-pristine ng-valid">
我怎样才能做到这一点,以便在对输入进行更改时输入添加了一个类?
有两种解决这个问题的好方法:
ng-dirty
1.使用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/
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:
watch-row-title
tag. we dont need this herescope.title
inside the watch-row-title
directive and the $scope.row.title
value inside the MyCtrl
controller.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>
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');
}
});
}
};
}
]);
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);