So verwenden Sie „ng-model“ in AngularJS mit BEISPIELEN
James Hartmann
Was ist das ng-Modell in AngularJs?
ng-model ist eine Direktive in Angular.JS, die Modelle darstellt und deren Hauptzweck darin besteht, die „Ansicht“ an das „Modell“ zu binden.
Angenommen, Sie möchten dem Endbenutzer eine einfache Seite wie die unten gezeigte präsentieren, auf der der Benutzer aufgefordert wird, „Vorname“ und „Nachname“ in Textfelder einzugeben. Und dann möchten Sie sicherstellen, dass Sie die vom Benutzer eingegebenen Informationen in Ihrem Datenmodell speichern.
Mit der Direktive „ng-model“ können Sie die Textfelder „Vorname“ und „Nachname“ Ihrem Datenmodell zuordnen.
Die ng-model-Direktive stellt sicher, dass die Daten in der „Ansicht“ und die Ihres „Modells“ jederzeit synchron bleiben.
Das ng-model-Attribut
Wie in der Einleitung zu diesem Kapitel erläutert, wird das ng-model-Attribut verwendet, um die Daten in Ihrem Modell an die dem Benutzer präsentierte Ansicht zu binden.
Das ng-model-Attribut wird verwendet für:
- Binden Sie Steuerelemente wie Eingabe, Textbereich und Auswahl in der Ansicht in das Modell ein.
- Stellen Sie ein Validierungsverhalten bereit. Beispielsweise kann einem Textfeld eine Validierung hinzugefügt werden, sodass nur numerische Zeichen in das Textfeld eingegeben werden können.
- Das ng-model-Attribut behält den Status des Steuerelements bei (mit Status meinen wir, dass das Steuerelement und die Daten immer synchron gehalten werden müssen. Wenn sich der Wert unserer Daten ändert, ändert sich automatisch der Wert im Steuerelement und umgekehrt).
So verwenden Sie das ng-Modell
1) Textbereich
Das Textbereichs-Tag wird zum Definieren eines mehrzeiligen Texteingabesteuerelements verwendet. Der Textbereich kann eine unbegrenzte Anzahl von Zeichen enthalten und der Text wird in einer Schriftart mit fester Breite dargestellt.
Schauen wir uns nun ein einfaches Beispiel an, wie wir die ng-model-Direktive zu einem Textbereichssteuerelement hinzufügen können.
In diesem Beispiel möchten wir zeigen, wie wir eine mehrzeilige Zeichenfolge vom Controller an die Ansicht übergeben und diesen Wert an das Textbereichssteuerelement anhängen können.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body >
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
<textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pDescription="This topic looks at how Angular JS works \nModels in Angular JS"});
</script>
</body>
</html>
Code-Erklärung:
- Der ng-model-Direktive wird verwendet, um die Membervariable „p“ anzuhängen.Description“ zum „textarea“-Steuerelement.Das „pDescriptDie Variable „ion“ enthält tatsächlich den Text, der an das Textbereichssteuerelement übergeben wird. Wir haben auch 2 Attribute für das Textbereichssteuerelement erwähnt, nämlich „rows=4“ und „cols=50“. Diese Attribute wurden erwähnt, damit wir mehrere Textzeilen anzeigen können. Durch die Definition dieser Attribute hat der Textbereich nun 4 Zeilen und 50 Spalten, sodass er mehrere Textzeilen anzeigen kann.
- Hier fügen wir die Membervariable an das Scope-Objekt mit dem Namen „pDescription“ und geben Sie der Variablen einen Zeichenfolgenwert ein.
- Beachten Sie, dass wir das Literal /n in die Zeichenfolge einfügen, damit der Text bei der Anzeige im Textbereich mehrere Zeilen umfassen kann. Das Literal /n teilt den Text in mehrere Zeilen auf, damit er im Textbereichssteuerelement als mehrere Textzeilen dargestellt werden kann.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie den Code im Browser ausführen.
Ausgang:
Aus der Ausgabe,
- Man kann deutlich erkennen, dass der dem p zugewiesene WertDescriptDie Ionenvariable wurde als Teil des Bereichsobjekts an das Textbereichssteuerelement übergeben.
- Anschließend wird es beim Laden der Seite angezeigt.
2) Eingabeelemente
Die ng-model-Direktive kann auch auf Eingabeelemente wie Textfelder, Kontrollkästchen, Optionsfelder usw. angewendet werden.
Sehen wir uns ein Beispiel an, wie wir das ng-Modell mit dem Eingabetyp „Textfeld“ und „Kontrollkästchen“ verwenden können.
Hier haben wir einen Texteingabetyp mit dem Namen „Guru99“ und zwei Kontrollkästchen, von denen eines standardmäßig aktiviert ist und das andere nicht aktiviert ist.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pname"><br>
Topic : <br>
<input type="checkbox" ng-model="Topic.Controller">Controller<br>
<input type="checkbox" ng-model="Topic.Models">Models
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pname="Guru99";
$scope.Topic =
{
Controller:true,
Models:false
}; });
</script>
</body>
</html>
Code-Erklärung:
- Der ng-model-Direktive wird verwendet, um die Mitgliedsvariable „pname“ an das Textsteuerelement des Eingabetyps anzuhängen. Die Variable „pname“ enthält den Text von „Guru99“, der an die Texteingabesteuerung übergeben wird. Beachten Sie, dass dem Namen der Mitgliedsvariablen ein beliebiger Name gegeben werden kann.
- Hier definieren wir unser erstes Kontrollkästchen „Controllers“, das an die Membervariable Topics.Controllers angehängt ist. Das Kontrollkästchen wird für dieses Kontrollkästchen markiert.
- Hier definieren wir unser erstes Kontrollkästchen „Modelle“, das an die Mitgliedsvariable Topics.Models angehängt ist. Das Kontrollkästchen wird für dieses Kontrollkästchen nicht markiert.
- Hier hängen wir die Mitgliedsvariable „pName“ an und geben den Zeichenfolgenwert „Guru99“ ein.
- Wir deklarieren eine Member-Array-Variable namens „Topics“ und weisen ihr zwei Werte zu, der erste ist „true“ und der zweite „false“. Wenn also das erste Kontrollkästchen den Wert „true“ erhält, wird das Kontrollkästchen für dieses Steuerelement markiert. Da der zweite Wert „false“ ist, wird das Kontrollkästchen für dieses Steuerelement nicht markiert.
Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgang:
Aus der Ausgabe,
- Es ist deutlich zu erkennen, dass der der pName-Variablen zugewiesene Wert „Guru99“ ist.
- Da der erste Prüfwert „true“ ist, ist das Kontrollkästchen für das Kontrollkästchen „Controller“ aktiviert. Da der zweite Wert „false“ ist, ist das Kontrollkästchen für das Kontrollkästchen „Modelle“ ebenfalls deaktiviert.
3) Wählen Sie ein Element aus der Dropdown-Liste aus
Die ng-model-Direktive kann auch auf das Select-Element angewendet und zum Auffüllen der Listenelemente in der Select-Liste verwendet werden.
Schauen wir uns ein Beispiel an, wie wir das ng-Modell mit dem Eingabetyp „select“ verwenden können.
Hier haben wir einen Texteingabetyp mit dem Namen „Guru99“ und es wird eine Auswahlliste mit den zwei Listenelementen „Controller“ und „Modelle“ geben.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
</head>
<body >
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoCtrl">
<form>
Topic Description:<br> <br>
Name : <input type="text" ng-model="pName" value="Guru99"><br>
Topic : <br>
<select ng-model="Topics">
<option>{{Topics.option1}}</option>
<option>{{Topics.option2}}</option>
</select>
</form>
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoCtrl', function($scope){
$scope.pName="Guru99";
$scope.Topics =
{
option1 : "Controller",
option2 : "Module"
}; });
</script>
</body>
</html>
- Der ng-model-Direktive wird verwendet, um die Mitgliedsvariable „Topics“ an das Select-Type-Steuerelement anzuhängen. Innerhalb des Auswahlsteuerelements hängen wir für jede der Optionen die Mitgliedsvariable Topics.option1 für die erste Option und Topics.option2 für die zweite Option an.
- Hier definieren wir unsere Array-Variable „Themen“, die zwei Schlüssel-Wert-Paare enthält. Das erste Paar hat den Wert „Controller“ und das zweite den Wert „Modelle“. Diese Werte werden an das ausgewählte Eingabe-Tag in der Ansicht übergeben. Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt.
Ausgang:
Aus der Ausgabe ist ersichtlich, dass der Wert, der der pName-Variablen zugewiesen wurde, „Guru99“ ist, und wir können sehen, dass das ausgewählte Eingabesteuerelement die Optionen „Controller“ und „Modelle“ hat.
Zusammenfassung
- Modelle in Angular JS werden durch die ng-model-Direktive dargestellt. Der Hauptzweck dieser Anweisung besteht darin, die Ansicht an das Modell zu binden. So erstellen Sie einen einfachen Controller mit den Anweisungen ng-app, ng-controller und ng-model.
- Die ng-model-Direktive kann mit einem „Textbereich“-Eingabesteuerelement verknüpft werden und mehrzeilige Zeichenfolgen können vom Controller an die Ansicht übergeben werden.
- Die ng-model-Direktive kann mit Eingabesteuerelementen wie Text- und Kontrollkästchensteuerelementen verknüpft werden, um sie zur Laufzeit dynamischer zu gestalten.
- Die Direktive ng-model kann auch verwendet werden, um eine Auswahlliste mit Optionen zu füllen, die dem Benutzer angezeigt werden können.