Comment puis-je ajouter une classe à une entrée si celle-ci est modifiée avec AngularJS?
J'ai codé la suite de mon formulaire:
<td><input type="text" ng-model="row.title" /></td>
Quand je regarde mon DOM avec les outils de développement Chrome je vois les suivantes:
<input type="text" ng-model="row.title" class="ng-pristine ng-valid">
Comment puis-je faire en sorte que lorsqu'il y a une modification apportée à l'entrée de l'entrée dispose d'une classe, ajouté à cela?
Vérifier
ng-dirty
classe, qui est automatiquement ajouté à l'entrée lorsqu'elle est modifiée. Ensuite, vous pouvez donner à ng-dirty
classe de vos propriétés cssOriginalL'auteur | 2013-07-15
Vous devez vous connecter pour publier un commentaire.
Il y a deux façons d'aborder ce problème:
1. Utiliser le haut-
ng-dirty
classe qui Angulaire met sur l'élément.Lorsque vous modifiez une entrée géré par Angulaire, il ajoute des classes CSS à l'entrée pour les différents états. Elles comprennent:
ng-pristine
- l'entrée n'a pas été modifiéng-dirty
- l'entrée a été modifiéeDonc, si vous pouvez modifier votre CSS à être basé sur la
.ng-dirty
classe, vous êtes bon pour aller.2. Utiliser un
form
directive avec la$dirty
drapeau.Lorsque vous utilisez un
form
élément Angulaire attribue unFormController
exemple sur le champ avec le même nom que lename
attribut sur la forme; chaque entrée à l'intérieur du formulaire est joint à ce FormController instance en tant que propriété, à nouveau avec le même nom que lename
attribut de l'entrée. Par exemple,vous donne
Chaque entrée de la propriété a certains de ses propre propriétés, y compris les
$pristine
et$dirty
; ces travaux comme les classes CSS énumérés ci-dessus. Ainsi, vous pouvez vérifier pour la$dirty
drapeau sur l'entrée et l'utilisationng-class
conditionnelle, appliquer une classe à l'élément. Un exemple:Vous pouvez trouver un exemple ici: http://jsfiddle.net/BinaryMuse/BDB5b/
OriginalL'auteur Michelle Tilley
Prendre un coup d'oeil à ce jsfiddle: http://jsfiddle.net/hNrEV/2/
L'idée principale est d'utiliser
$scope.$watch
pour surveiller les modifications apportées à la boîte de saisie. J'ai donné un id derowTitle
, et utilisé une directive appeléewatchRowTitle
que des montres pour les changements de$scope.row.title
, et ajoute une classe "rouge" qui colore le texte en rouge à chaque fois que le texte dans la zone d'entrée est égal à "faux titre".C'est probablement une bonne pratique de manipulation du DOM dans les directives. Ici, le
watchRowTitle
directive renvoie un objet avec 4 touches:watch-row-title
tag. nous n'avons pas besoin de cela iciscope.title
à l'intérieur de lawatch-row-title
la directive et le$scope.row.title
valeur à l'intérieur de laMyCtrl
contrôleur.E
, qui représente l'élément. Donc cela limite l'utilisation de l'watch-row-title
directive dans les balises html, en d'autres termes:<watch-row-title></watch-row-title>
scope.$watch
surtitle
. Nous devons fournir une fonction de 2 paramètresnewValue
etoldValue
(vous pouvez donner un nom à quelque chose, mais le fait de les nommer de cette façon est plus significatif), qui détient les nouvelles et les anciennes valeurs de la variable qui est regardé. Chaque fois que lescope.title
variable devient la chaîne "faux titre", il ajoute la classe CSS "rouge" à la zone de saisie de l'idrowTitle
(notez la façon dont le texte dans la zone d'entrée s'allume en rouge). Sinon, il supprime que la classe CSS. Cette partie se fait à l'aide de JQuery.HTML:
CSS:
JavaScript:
OriginalL'auteur yanhan
HTML
JS
Vous devez avoir lite jQuery ou Zepto avec AngularJS 😉
absolument pas , mais ce que vous avez est jqLite. donc, la question est de savoir comment faire ce que vous avez fait avec jqLite ?
Vérifiez ceci : docs.angularjs.org/api/angular.element
"Ne Angulaire utiliser la bibliothèque jQuery? Oui, Angulaire pouvez utiliser jQuery si elle est présente dans votre application lorsque l'application est en cours de bootstrap. Si jQuery n'est pas présent dans votre chemin du script, Angulaire revient à sa propre mise en œuvre du sous-ensemble de jQuery que nous appelons jQLite."
OriginalL'auteur EpokK