เหตุการณ์ AngularJS
เหตุการณ์ AngularJS HTML มีการเรียนการสอนของตัวเอง
NG-คลิกคำสั่ง
NG-คลิกสั่งกำหนด AngularJS คลิกเหตุการณ์
AngularJS ตัวอย่าง
<ปุ่ม NG-คลิก = "นับ = นับ + 1"> ชี้ให้ฉัน! </ ปุ่ม>
<p> {{นับ}} </ p>
</ div>
ลอง»
ซ่อนองค์ประกอบ HTML
NG-ซ่อนสั่งชุดส่วนแอพลิเคชันสามารถมองเห็นได้
NG-ซ่อน = "true" องค์ประกอบการตั้งค่า HTML จะมองไม่เห็น
NG-ซ่อน = "false" การตั้งค่าองค์ประกอบ HTML สามารถมองเห็นได้
AngularJS ตัวอย่าง
<ปุ่ม NG-คลิก = "สลับ ()" >> ซ่อน / แสดง </ ปุ่ม>
<p NG-ซ่อน = "myvar ">
ชื่อ: <ชนิดของการป้อนข้อมูล = "text" NG-รุ่น = "firstName"> ฟรี
ชื่อ: <ชนิดของการป้อนข้อมูล = "text" NG-รุ่น = "นามสกุล"> ฟรี
<Br>
ชื่อเต็ม: {{firstName + " " + นามสกุล}}
</ p>
</ div>
<script>
var App = angular.module ( 'MyApp' []);
app.controller ( 'personCtrl' ฟังก์ชั่น ($ ขอบเขต) {
$ Scope.firstName = "จอห์น"
$ Scope.lastName = "โด"
$ Scope.myVar = false;
$ Scope.toggle = function () {
! $ = $ Scope.myVar scope.myVar;
};
});
</ script>
ลอง»
การประยุกต์ใช้การวิเคราะห์:
ส่วนควบคุมส่วนแรก personController ที่คล้ายกัน
แอพลิเคชันที่มีแอตทริบิวต์เริ่มต้น: $ scope.myVar = false;
NG-ซ่อนคำแนะนำชุด <p> องค์ประกอบและสองอินพุตเขตจะมองเห็นได้ทั้งนี้ขึ้นอยู่กับมูลค่าของ myvar (จริงหรือเท็จ) ชุดที่สามารถมองเห็นได้
สลับ () ฟังก์ชั่นที่ใช้ในการเปลี่ยนค่าของตัวแปร myvar (จริงและเท็จ) เดอะ
NG-ซ่อน = "true" ดังนั้นองค์ประกอบที่มองไม่เห็น
องค์ประกอบการแสดงผล HTML
การเรียนการสอน NG-แสดงสามารถใช้ในการตั้งค่าได้ว่าในส่วนของแอพลิเคชันที่มองเห็น
NG-แสดง = "false" คุณสามารถตั้งค่าองค์ประกอบ HTML จะมองไม่เห็น
NG-แสดง = "true" สามารถกำหนดองค์ประกอบ HTML จะมองเห็นได้
ตัวอย่างต่อไปนี้ใช้คำสั่ง NG-แสดง:
AngularJS ตัวอย่าง
<ปุ่ม NG-คลิก = "สลับ ()"> ซ่อน / แสดง </ ปุ่ม>
<p NG-แสดง = "myvar ">
ชื่อ: <ชนิดของการป้อนข้อมูล = "text" NG-รุ่น = "firstName"> ฟรี
นามสกุล: <ชนิดของการป้อนข้อมูล = "text" NG-รุ่น = "นามสกุล"> ฟรี
<Br>
ชื่อ: {{firstName + "" + นามสกุล}}
</ p>
</ div>
<script>
var App = angular.module ( 'MyApp' []);
app.controller ( 'personCtrl' ฟังก์ชั่น ($ ขอบเขต) {
$ Scope.firstName = "จอห์น"
$ Scope.lastName = "โด"
$ Scope.myVar = true;
$ Scope.toggle = function () {
! $ = $ Scope.myVar scope.myVar;
}
});
</ script>
ลอง»