วิธีใช้ “ng-model” ใน AngularJS พร้อมตัวอย่าง

โดย: เจมส์ ฮาร์ทแมน เจมส์ ฮาร์ทแมน
Hours วันที่อัพเดท

ng-model ใน AngularJs คืออะไร?

ng-model เป็นคำสั่งใน Angular.JS ที่แสดงถึงโมเดลและจุดประสงค์หลักคือการผูก "มุมมอง" กับ "โมเดล"

ตัวอย่างเช่น สมมติว่าคุณต้องการนำเสนอหน้าธรรมดาๆ ให้กับผู้ใช้ปลายทาง เช่น หน้าที่แสดงด้านล่าง ซึ่งขอให้ผู้ใช้ป้อน "ชื่อ" และ "นามสกุล" ในช่องข้อความ จากนั้นคุณต้องการให้แน่ใจว่าคุณได้จัดเก็บข้อมูลที่ผู้ใช้ป้อนลงในแบบจำลองข้อมูลของคุณแล้ว

คุณสามารถใช้ไดเรกทิฟ ng-model เพื่อแมปฟิลด์กล่องข้อความของ “ชื่อ” และ “นามสกุล” ไปยังโมเดลข้อมูลของคุณได้

ไดเร็กทิฟ 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. เค้ก คำสั่ง ng-model ใช้เพื่อแนบตัวแปรสมาชิกที่เรียกว่า “pDescription” ไปยังส่วนควบคุม “textarea” ส่วน “pDescriptตัวแปร ion” จะมีข้อความจริงซึ่งจะถูกส่งต่อไปยังตัวควบคุมพื้นที่ข้อความ นอกจากนี้เรายังได้กล่าวถึงคุณลักษณะ 2 ประการสำหรับการควบคุม textarea ซึ่งก็คือ rows=4 และ cols=50 มีการกล่าวถึงคุณลักษณะเหล่านี้เพื่อให้เราสามารถแสดงข้อความได้หลายบรรทัด ด้วยการกำหนดคุณลักษณะเหล่านี้ พื้นที่ข้อความจะมี 4 แถวและ 50 คอลัมน์ เพื่อให้สามารถแสดงข้อความได้หลายบรรทัด
  2. ที่นี่เราจะแนบตัวแปรสมาชิกเข้ากับวัตถุขอบเขตที่เรียกว่า “pDescription” และใส่ค่าสตริงให้กับตัวแปร
  3. โปรดทราบว่าเราใส่ค่าตัวอักษร /n ไว้ในสตริงเพื่อให้ข้อความสามารถมีได้หลายบรรทัดเมื่อแสดงในพื้นที่ข้อความ ค่าตัวอักษร /n จะแบ่งข้อความออกเป็นหลายบรรทัดเพื่อให้สามารถแสดงผลเป็นข้อความหลายบรรทัดในตัวควบคุมพื้นที่ข้อความได้

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

พื้นที่ข้อความใน ng-model

จากผลลัพธ์ที่ได้

  • จะเห็นได้ชัดเจนว่าค่าที่กำหนดให้กับ pDescriptตัวแปรไอออนซึ่งเป็นส่วนหนึ่งของวัตถุขอบเขตถูกส่งผ่านไปยังตัวควบคุมพื้นที่ข้อความ
  • จากนั้นจะแสดงขึ้นมาเมื่อโหลดหน้าเพจเสร็จ

2) องค์ประกอบอินพุต

ไดเร็กทิฟ ng-model ยังสามารถนำไปใช้กับองค์ประกอบอินพุต เช่น กล่องข้อความ กล่องกาเครื่องหมาย ปุ่มตัวเลือก ฯลฯ ได้อีกด้วย

มาดูตัวอย่างการใช้ ng-model กับชนิดอินพุต “textbox” และ “checkbox” กัน

ที่นี่เราจะมีประเภทการป้อนข้อความซึ่งจะมีชื่อเป็น "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. เค้ก คำสั่ง ng-model ใช้เพื่อแนบตัวแปรสมาชิกที่เรียกว่า "pname" เข้ากับตัวควบคุมข้อความประเภทอินพุต ตัวแปร “pname” จะมีข้อความ “Guru99” ซึ่งจะถูกส่งต่อไปยังตัวควบคุมการป้อนข้อความ โปรดทราบว่าสามารถกำหนดชื่อใดๆ ให้กับชื่อของตัวแปรสมาชิกได้
  2. ที่นี่เราจะกำหนดกล่องกาเครื่องหมายแรกของเรา "Controllers" ซึ่งแนบอยู่กับตัวแปรสมาชิก Topics.Controllers กล่องกาเครื่องหมายจะถูกทำเครื่องหมายไว้สำหรับการควบคุมกาเครื่องหมายนี้
  3. ที่นี่เราจะกำหนดกล่องกาเครื่องหมายแรกของเรา "Models" ซึ่งแนบกับตัวแปรสมาชิก Topics.Models กล่องกาเครื่องหมายจะไม่ถูกทำเครื่องหมายสำหรับการควบคุมกาเครื่องหมายนี้
  4. ที่นี่เราจะแนบตัวแปรสมาชิกที่เรียกว่า "pName" และใส่ค่าสตริงเป็น "Guru99"
  5. เรากำลังประกาศตัวแปรอาร์เรย์สมาชิกที่เรียกว่า "Topics" และกำหนดค่าให้สองค่า ค่าแรกคือ "true" และค่าที่สองคือ "false" ดังนั้น เมื่อช่องกาเครื่องหมายแรกได้รับค่าเป็น true ช่องกาเครื่องหมายจะถูกทำเครื่องหมายสำหรับตัวควบคุมนี้ และในทำนองเดียวกัน เนื่องจากค่าที่สองเป็น false ช่องกาเครื่องหมายจะไม่ถูกทำเครื่องหมายสำหรับตัวควบคุมนี้

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

Output:

อินพุตองค์ประกอบใน ng-model

จากผลลัพธ์ที่ได้

  • จะเห็นได้ชัดเจนว่าค่าที่กำหนดให้กับตัวแปร pName คือ “Guru99”
  • เนื่องจากค่าตรวจสอบแรกเป็น "จริง" จึงผ่าน ดังนั้นช่องกาเครื่องหมายจึงถูกทำเครื่องหมายไว้สำหรับช่องกาเครื่องหมาย "ตัวควบคุม" ในทำนองเดียวกัน เนื่องจากค่าที่สองเป็นเท็จ ช่องกาเครื่องหมายจึงไม่ถูกทำเครื่องหมายไว้สำหรับช่องกาเครื่องหมาย "แบบจำลอง"

3) เลือกองค์ประกอบจากดรอปดาวน์

คำสั่ง ng-model ยังสามารถนำไปใช้กับองค์ประกอบที่เลือกและใช้เพื่อเติมรายการในรายการที่เลือก

ลองดูตัวอย่างว่าเราสามารถใช้ ng-model กับประเภทอินพุตที่เลือกได้อย่างไร

ที่นี่เราจะมีประเภทการป้อนข้อความซึ่งจะมีชื่อ "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. เค้ก คำสั่ง ng-model ใช้เพื่อแนบตัวแปรสมาชิกที่เรียกว่า "หัวข้อ" ไปยังตัวควบคุมประเภทที่เลือก ภายในตัวควบคุมการเลือก สำหรับแต่ละตัวเลือก เราจะแนบตัวแปรสมาชิกของ Topics.option1 สำหรับตัวเลือกแรกและ Topics.option2 สำหรับตัวเลือกที่สอง
  2. ที่นี่เราจะกำหนดตัวแปรอาร์เรย์ Topics ของเราซึ่งเก็บคู่คีย์-ค่า 2 คู่ คู่แรกมีค่าเป็น "Controllers" และคู่ที่สองมีค่าเป็น "Models" ค่าเหล่านี้จะถูกส่งต่อไปยังแท็กอินพุต select ในมุมมอง หากโค้ดถูกดำเนินการสำเร็จ จะแสดงผลลัพธ์ต่อไปนี้

Output:

เลือกองค์ประกอบจากดรอปดาวน์ใน ng-model

จากเอาต์พุตจะเห็นได้ว่าค่าที่กำหนดให้กับตัวแปร pName คือ “Guru99” และเราจะเห็นว่าตัวควบคุมอินพุตแบบเลือกมีตัวเลือกเป็น “Controllers” และ “Models”

สรุป

  • โมเดลใน Angular JS แสดงด้วยคำสั่ง ng-model วัตถุประสงค์หลักของคำสั่งนี้คือการผูกมุมมองเข้ากับโมเดล วิธีสร้างคอนโทรลเลอร์อย่างง่ายโดยใช้คำสั่ง ng-app, ng-controller และ ng-model
  • คำสั่ง ng-model สามารถเชื่อมโยงกับตัวควบคุมอินพุต "พื้นที่ข้อความ" และสามารถส่งสตริงหลายบรรทัดจากคอนโทรลเลอร์ไปยังมุมมองได้
  • สามารถเชื่อมโยงกับตัวควบคุมอินพุตได้ เช่น ตัวควบคุมข้อความและกล่องกาเครื่องหมาย เพื่อให้มีความไดนามิกมากขึ้นในขณะรันไทม์
  • ไดเร็กทิฟ ng-model ยังสามารถใช้เพื่อเพิ่มตัวเลือกลงในรายการที่เลือกซึ่งสามารถแสดงให้ผู้ใช้เห็นได้