Wie css-Klasse dynamisch zur Eingabe von Typ HTML-Element in eckigen js-Controller-Funktion hinzufügen?

Question

Voraussetzung: Erstellen Sie in Angular JS eine generische Controllerfunktion, die alle Eingabetypen berücksichtigt.

Answer 1

Was wollen Sie dann ist es:

• die filled CSS-Klasse hinzufügen, wenn das Formularfeld einen Wert hat, und
• die filled CSS-Klasse entfernen, wenn das Formularfeld
keinen Wert hat
• tun beide oben mit einer wiederverwendbaren Funktion in einem Winkel-Controller.

Sie können dies mit Angular des erreichen Einbau-ng-class Richtlinie:

HTML:

<input 
    id="renewccCVV" 
    type="number" 
    class="form-control" 
    ng-class="isFilled(RenewCard.cvv)" 
    ng-model="RenewCard.cvv" 
    maxlength="4" /> 

JS:

$scope.isFilled = function(value){ 
    return (!!value) ? "filled" : ""; 
} 

Example Plunk

Answer 2

Fügen Sie den folgenden Code zu Angular js Controller hinzu. 'gefüllt' ist die CSS-Klasse, die ich verwenden möchte. Ich gebe das $ -Ereignis von meinem ng-blur -Ereignis in der HTML-Eingabesteuerung weiter. Hier

$scope.addCssClass = function (event) { 
    if (event !== null && event.target !== null) { 
     if (event.target.value !== "") { 
      if (event.target.className.search('filled') < 0) { 
       var classes = event.target.className; 
       classes += ' filled'; 
       event.target.className = classes; 
      } 
     } 
     else { 
      event.target.classList.remove('filled'); 
     } 
    } 
}; 

ist der Ausschnitt des HTML-Code.

<input id="renewccCVV" type="number" class="form-control" ng-blur="addCssClass($event)" ng-model="RenewCard.cvv" maxlength="4" /> 

Wenn mein Eingangssteuerwert und CSS-Klasse hat ‚gefüllt‘ hinzugefügt wird, nicht ng-Klasse, dann die CSS-Klasse hinzufügen, wenn die Eingabe bereits CSS-Klasse hat und Wert nicht null ist, fügen Sie nicht die Klasse. Wenn der Wert vom Eingabesteuerelement entfernt wird, entfernen Sie die CSS-Klasse aus der Klassenliste.