Πώς να χρησιμοποιήσετε το "ng-model" στο AngularJS με EXAMPLES

Με: Τζέιμς Χάρτμαν Τζέιμς Χάρτμαν
Hours Ενημερώθηκε

Τι είναι το ng-model στο AngularJs;

Το ng-model είναι μια οδηγία στο Angular.JS που αντιπροσωπεύει μοντέλα και ο πρωταρχικός της σκοπός είναι να συνδέσει την «προβολή» με το «μοντέλο».

Για παράδειγμα, ας υποθέσουμε ότι θέλετε να παρουσιάσετε μια απλή σελίδα στον τελικό χρήστη, όπως αυτή που φαίνεται παρακάτω, η οποία ζητά από τον χρήστη να εισαγάγει το "Όνομα" και το "Επώνυμο" στα πλαίσια κειμένου. Στη συνέχεια, θέλετε να διασφαλίσετε ότι αποθηκεύετε τις πληροφορίες που έχει εισαγάγει ο χρήστης στο μοντέλο δεδομένων σας.

Μπορείτε να χρησιμοποιήσετε την οδηγία ng-model για να αντιστοιχίσετε τα πεδία πλαισίου κειμένου "First name" και "Last Name" στο μοντέλο δεδομένων σας.

Η οδηγία ng-model θα διασφαλίσει ότι τα δεδομένα στην "προβολή" και αυτά του "μοντέλου" σας διατηρούνται σε συγχρονισμό όλη την ώρα.

ng-model στο AngularJS

Το χαρακτηριστικό ng-model

Όπως συζητήθηκε στην εισαγωγή αυτού του κεφαλαίου, το χαρακτηριστικό ng-model χρησιμοποιείται για τη σύνδεση των δεδομένων στο μοντέλο σας με την προβολή που παρουσιάζεται στον χρήστη.

Το χαρακτηριστικό ng-model χρησιμοποιείται για,

  1. Στοιχεία ελέγχου σύνδεσης όπως εισαγωγή, περιοχή κειμένου και επιλογές στην προβολή στο μοντέλο.
  2. Παρέχετε μια συμπεριφορά επικύρωσης – για παράδειγμα, μπορεί να προστεθεί μια επικύρωση σε ένα πλαίσιο κειμένου που μόνο αριθμητικοί χαρακτήρες μπορούν να εισαχθούν στο πλαίσιο κειμένου.
  3. Το χαρακτηριστικό ng-model διατηρεί την κατάσταση του στοιχείου ελέγχου (Με την κατάσταση, εννοούμε ότι το στοιχείο ελέγχου και τα δεδομένα πρέπει να διατηρούνται πάντα σε συγχρονισμό. Εάν αλλάξει η τιμή των δεδομένων μας, θα αλλάξει αυτόματα την τιμή στο στοιχείο ελέγχου και αντίστροφα)

Πώς να χρησιμοποιήσετε το ng-model

1) Περιοχή κειμένου

Η ετικέτα περιοχής κειμένου χρησιμοποιείται για να ορίσει ένα στοιχείο ελέγχου εισαγωγής κειμένου πολλών γραμμών. Η περιοχή κειμένου μπορεί να περιέχει απεριόριστο αριθμό χαρακτήρων και το κείμενο αποδίδεται σε γραμματοσειρά σταθερού πλάτους.

Ας δούμε λοιπόν ένα απλό παράδειγμα για το πώς μπορούμε να προσθέσουμε την οδηγία ng-model σε ένα στοιχείο ελέγχου περιοχής κειμένου.

Σε αυτό το παράδειγμα, θέλουμε να δείξουμε πώς μπορούμε να περάσουμε μια συμβολοσειρά πολλών γραμμών από τον ελεγκτή στην προβολή και να προσαρτήσουμε αυτήν την τιμή στο στοιχείο ελέγχου περιοχής κειμένου.

Περιοχή κειμένου στο ng-model

<!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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
	<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>

Επεξήγηση κώδικα:

  1. The οδηγία ng-model χρησιμοποιείται για την επισύναψη της μεταβλητής μέλους που ονομάζεται «pDescription» στο στοιχείο ελέγχου «textarea».Το «σελDescriptΗ μεταβλητή ion” θα περιέχει στην πραγματικότητα το κείμενο, το οποίο θα μεταβιβαστεί στο στοιχείο ελέγχου περιοχής κειμένου. Έχουμε επίσης αναφέρει 2 χαρακτηριστικά για το στοιχείο ελέγχου textarea που είναι rows=4 και cols=50. Αυτά τα χαρακτηριστικά αναφέρθηκαν έτσι ώστε να μπορούμε να δείξουμε πολλές γραμμές κειμένου. Ορίζοντας αυτά τα χαρακτηριστικά, η περιοχή κειμένου θα έχει πλέον 4 σειρές και 50 στήλες, ώστε να μπορεί να εμφανίζει πολλές γραμμές κειμένου.
  2. Εδώ επισυνάπτουμε τη μεταβλητή μέλους στο αντικείμενο πεδίου που ονομάζεται "pDescription» και βάζοντας μια τιμή συμβολοσειράς στη μεταβλητή.
  3. Σημειώστε ότι βάζουμε το /n κυριολεκτικό στη συμβολοσειρά έτσι ώστε το κείμενο να μπορεί να αποτελείται από πολλές γραμμές όταν εμφανίζεται στην περιοχή κειμένου. Το /n κυριολεκτικά χωρίζει το κείμενο σε πολλές γραμμές, έτσι ώστε να μπορεί να αποδοθεί στον έλεγχο περιοχής κειμένου ως πολλές γραμμές κειμένου.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Περιοχή κειμένου στο ng-model

Από την έξοδο,

  • Μπορεί να φανεί καθαρά ότι η τιμή που αποδίδεται στο pDescriptμεταβλητή ιόντος ως μέρος του αντικειμένου πεδίου μεταβιβάστηκε στο στοιχείο ελέγχου περιοχής κειμένου.
  • Στη συνέχεια, εμφανίζεται κατά τη φόρτωση της σελίδας.

2) Στοιχεία εισαγωγής

Η οδηγία ng-model μπορεί επίσης να εφαρμοστεί στα στοιχεία εισόδου, όπως το πλαίσιο κειμένου, τα πλαίσια ελέγχου, τα κουμπιά επιλογής κ.λπ.

Ας δούμε ένα παράδειγμα για το πώς μπορούμε να χρησιμοποιήσουμε το ng-model με τον τύπο εισόδου "πλαίσιο κειμένου" και "πλαίσιο ελέγχου".

Εδώ θα έχουμε έναν τύπο εισαγωγής κειμένου που θα έχει το όνομα "Guru99" και θα υπάρχουν 2 πλαίσια ελέγχου, το ένα που θα επισημαίνεται από προεπιλογή και το άλλο δεν θα επισημαίνεται.

Στοιχεία εισαγωγής στο ng-model

<!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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pname"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
		<input type="checkbox" ng-model="Topic.Controller">Controller<br>&nbsp;&nbsp;&nbsp;
		<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>

Επεξήγηση κώδικα:

  1. The οδηγία ng-model χρησιμοποιείται για την επισύναψη της μεταβλητής μέλους που ονομάζεται "pname" στο στοιχείο ελέγχου κειμένου τύπου εισόδου. Η μεταβλητή "pname" θα περιέχει το κείμενο του "Guru99" το οποίο θα μεταβιβαστεί στο στοιχείο ελέγχου εισαγωγής κειμένου. Σημειώστε ότι οποιοδήποτε όνομα μπορεί να δοθεί στο όνομα της μεταβλητής μέλους.
  2. Εδώ ορίζουμε το πρώτο μας πλαίσιο ελέγχου "Controllers" το οποίο είναι συνδεδεμένο με τη μεταβλητή μέλους Topics.Controllers. Το πλαίσιο ελέγχου θα επισημανθεί για αυτό το στοιχείο ελέγχου ελέγχου.
  3. Εδώ ορίζουμε το πρώτο μας πλαίσιο ελέγχου "Μοντέλα" που είναι συνδεδεμένο με τη μεταβλητή μέλους Topics.Models. Το πλαίσιο ελέγχου δεν θα επισημανθεί για αυτό το στοιχείο ελέγχου ελέγχου.
  4. Εδώ επισυνάπτουμε τη μεταβλητή μέλους που ονομάζεται "pName" και βάζουμε μια τιμή συμβολοσειράς "Guru99".
  5. Δηλώνουμε μια μεταβλητή πίνακα μέλους που ονομάζεται "Θέματα" και της δίνουμε δύο τιμές, η πρώτη είναι "true" και η δεύτερη "false". Έτσι, όταν το πρώτο πλαίσιο ελέγχου λάβει την τιμή true, το πλαίσιο ελέγχου θα επισημανθεί για αυτό το στοιχείο ελέγχου, και ομοίως, καθώς η δεύτερη τιμή είναι ψευδής, το πλαίσιο ελέγχου δεν θα επισημανθεί για αυτό το στοιχείο ελέγχου.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Στοιχεία εισαγωγής στο ng-model

Από την έξοδο,

  • Μπορεί να φανεί ξεκάθαρα ότι η τιμή που έχει εκχωρηθεί στη μεταβλητή pName είναι "Guru99"
  • Δεδομένου ότι η πρώτη τιμή ελέγχου είναι "true" και πέρασε, το πλαίσιο ελέγχου επισημαίνεται για το πλαίσιο ελέγχου "Controllers". Ομοίως, καθώς η δεύτερη τιμή είναι ψευδής, το πλαίσιο ελέγχου δεν επισημαίνεται για το πλαίσιο ελέγχου "Μοντέλα".

3) Επιλέξτε στοιχείο από το αναπτυσσόμενο μενού

Η οδηγία ng-model μπορεί επίσης να εφαρμοστεί στο στοιχείο επιλογής και να χρησιμοποιηθεί για τη συμπλήρωση των στοιχείων της λίστας στη λίστα επιλογής.

Ας δούμε ένα παράδειγμα για το πώς μπορούμε να χρησιμοποιήσουμε το ng-model με τον τύπο εισόδου Select.

Εδώ θα έχουμε έναν τύπο εισαγωγής κειμένου που θα έχει το όνομα "Guru99" και θα υπάρχει μια λίστα επιλογής με 2 στοιχεία λίστας "Controller" και "Models".

Επιλέξτε στοιχείο από το αναπτυσσόμενο μενού στο ng-model

<!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>
		&nbsp;&nbsp;&nbsp;Topic Description:<br> <br>
		&nbsp;&nbsp;&nbsp;
        
		Name : <input type="text" ng-model="pName" value="Guru99"><br>
		&nbsp;&nbsp;&nbsp;
		Topic : <br>&nbsp;&nbsp;&nbsp;
        
		<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>
  1. The οδηγία ng-model χρησιμοποιείται για την προσάρτηση της μεταβλητής μέλους που ονομάζεται "Θέματα" στο στοιχείο ελέγχου επιλογής τύπου. Μέσα στο στοιχείο ελέγχου επιλογής, για καθεμία από τις επιλογές, επισυνάπτουμε τη μεταβλητή μέλους Topics.option1 για την πρώτη επιλογή και Topics.option2 για τη δεύτερη επιλογή.
  2. Εδώ ορίζουμε τη μεταβλητή του πίνακα Θέματα που περιέχει 2 ζεύγη κλειδιού-τιμής. Το πρώτο ζεύγος έχει την τιμή "Controllers" και το δεύτερο έχει την τιμή "Models". Αυτές οι τιμές θα περάσουν για να επιλέξετε την ετικέτα εισόδου στην προβολή. Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη Έξοδος.

Παραγωγή:

Επιλέξτε στοιχείο από το αναπτυσσόμενο μενού στο ng-model

Από την έξοδο, φαίνεται ότι η τιμή που έχει εκχωρηθεί στη μεταβλητή pName είναι "Guru99" και μπορούμε να δούμε ότι το στοιχείο ελέγχου εισόδου επιλογής έχει τις επιλογές "Controllers" και "Models".

Σύνοψη

  • Τα μοντέλα στο Angular JS αντιπροσωπεύονται από την οδηγία ng-model. Ο πρωταρχικός σκοπός αυτής της οδηγίας είναι να δεσμεύσει την άποψη με το μοντέλο. Πώς να δημιουργήσετε έναν απλό ελεγκτή χρησιμοποιώντας τις οδηγίες ng-app, ng-controller και ng-model.
  • Η οδηγία ng-model μπορεί να συνδεθεί με ένα στοιχείο ελέγχου εισαγωγής «περιοχής κειμένου» και οι συμβολοσειρές πολλαπλών γραμμών μπορούν να περάσουν από τον ελεγκτή στην προβολή.
  • Η οδηγία ng-model μπορεί να συνδεθεί με στοιχεία ελέγχου εισόδου, όπως τα στοιχεία ελέγχου κειμένου και πλαισίου ελέγχου, για να γίνουν πιο δυναμικά κατά την εκτέλεση.
  • Η οδηγία ng-model μπορεί επίσης να χρησιμοποιηθεί για τη συμπλήρωση μιας λίστας επιλογής με επιλογές που μπορούν να εμφανιστούν στον χρήστη.

Μπορεί να σας αρέσει: