Latest web development tutorials

AngularJS ควบคุม

AngularJS AngularJS การใช้งานควบคุมข้อมูล

ควบคุม AngularJS เป็นวัตถุ JavaScript ปกติ

AngularJS ควบคุม

แอพลิเคชัน AngularJS เป็นตัวควบคุม

NG-ควบคุมสั่งกำหนดควบคุมแอพลิเคชัน

ตัวควบคุมเป็นวัตถุ JavaScript ที่สร้างขึ้นโดยสร้างของวัตถุ JavaScript มาตรฐาน

AngularJS ตัวอย่าง

<div NG-App = "MyApp " NG-ควบคุม = "myCtrl">

ชื่อ: <ชนิดของการป้อนข้อมูล = "text" NG-รุ่น = "firstName"> ฟรี
นามสกุล: <ชนิดของการป้อนข้อมูล = "text" NG-รุ่น = "นามสกุล"> ฟรี
<Br>
ชื่อ: {{firstName + "" + นามสกุล}}

</ div>

<script>
var App = angular.module ( 'MyApp' []);
app.controller ( 'myCtrl' ฟังก์ชั่น ($ ขอบเขต) {
$ Scope.firstName = "จอห์น";
$ Scope.lastName = "โด";
});
</ script>

ลอง»

การประยุกต์ใช้การวิเคราะห์:

AngularJS การใช้งานที่กำหนดโดย NG-App การประยุกต์ใช้ใน <div> ภายใน

NG-ควบคุม = "myCtrl"? คุณสมบัติเป็นคำแนะนำ AngularJS มันถูกใช้ในการกำหนดตัวควบคุม

ฟังก์ชั่น myCtrl เป็นฟังก์ชัน JavaScript

AngularJS ใช้วัตถุ $ ขอบเขตที่จะเรียกตัวควบคุม

ใน AngularJS ที่ $ ขอบเขตเป็นโปรแกรม Like (ตัวแปรและฟังก์ชั่นที่อยู่ในใบสมัคร) ความ

ควบคุม $ ขอบเขต (เทียบเท่าขอบเขตช่วงการควบคุม) เพื่อบันทึก AngularJS แบบจำลอง (Model) วัตถุ

ควบคุมขอบเขตสร้างคุณสมบัติที่สอง (firstName และนามสกุล)

NG-รูปแบบช่องใส่คำสั่งผูกไว้กับตัวควบคุมแอตทริบิวต์ (firstName และนามสกุล)

วิธีการควบคุม

ตัวอย่างข้างต้นแสดงให้เห็นถึงวัตถุที่ควบคุมและทรัพย์สินของชื่อนามสกุลกับทั้งสอง

ควบคุมอาจจะมีวิธีการ (ฟังก์ชั่นและตัวแปร):

AngularJS ตัวอย่าง

<div NG-App = "MyApp " NG-ควบคุม = "personCtrl">

ชื่อ: <ชนิดของการป้อนข้อมูล = "text" NG-รุ่น = "firstName"> ฟรี
นามสกุล: <ชนิดของการป้อนข้อมูล = "text" NG-รุ่น = "นามสกุล"> ฟรี
<Br>
ชื่อ: {{ชื่อเต็ม ()}}

</ div>

<script>
var App = angular.module ( 'MyApp' []);
app.controller ( 'personCtrl' ฟังก์ชั่น ($ ขอบเขต) {
$ Scope.firstName = "จอห์น";
$ Scope.lastName = "โด";
$ Scope.fullName = function () {
ผลตอบแทน $ scope.firstName + "" + $ scope.lastName;
}
});
</ script>

ลอง»

ควบคุมแฟ้มภายนอก

ในการใช้งานขนาดใหญ่ควบคุมมักจะเก็บไว้ในแฟ้มภายนอก

เพียงแค่ใส่ <script> แท็กคัดลอกโค้ดชื่อ personController.js แฟ้มภายนอกสามารถ:

AngularJS ตัวอย่าง

<div NG-App = "MyApp " NG-ควบคุม = "personCtrl">

ชื่อจริง: <ชนิดของการป้อนข้อมูล = " ข้อความ" NG-รุ่น = "firstName"> ฟรี
นามสกุล: <ชนิดของการป้อนข้อมูล = " ข้อความ" NG-รุ่น = "นามสกุล"> ฟรี
<Br>
ชื่อเต็ม: {{firstName + " " + นามสกุล}}

</ div>

<script src = "personController.js"> </ script>

ลอง»

ตัวอย่างอื่น ๆ

ตัวอย่างต่อไปนี้สร้างแฟ้มควบคุมใหม่:

angular.module ( 'MyApp' []). Controller ( 'namesCtrl' ฟังก์ชั่น ($ ขอบเขต) {
$ Scope.names = [
{ชื่อ: 'เจนี่', ประเทศ: 'นอร์เวย์'}
{ชื่อ: 'Hege', ประเทศ: 'สวีเดน'}
{ชื่อ: 'ไก่', ประเทศ: 'เดนมาร์ก'}
];
});

บันทึกแฟ้มเป็น namesController.js :

จากนั้นใช้ตัวควบคุมในแฟ้มของโปรแกรมประยุกต์:

AngularJS ตัวอย่าง

<div NG-App = "MyApp " NG-ควบคุม = "namesCtrl">

<ul>
<li NG-ซ้ำ = "x ในชื่อ">
{{X.name + ',' + x.country}}
</ li>
</ ul>

</ div>

<script src = "namesController.js"> </ script>

ลอง»