AngularJS Bootstrap บทนำรายละเอียดและรหัสตัวอย่าง

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-07-27 18:48:01

Angularjs bootstrap

สไตล์ชีทที่ต้องการของ AngularJS คือ Twitter Bootstrap ซึ่งเป็นกรอบส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน

ตรวจสอบการสอน bootstrap

รองเท้าบู๊ต

คุณสามารถเพิ่ม twitter bootstrap ลงในแอปพลิเคชัน AngularJS ของคุณและคุณสามารถเพิ่มรหัสต่อไปนี้ในองค์ประกอบ <head> ของคุณ:

หากเว็บไซต์อยู่ในประเทศขอแนะนำให้ใช้ bootstrap ของห้องสมุดทรัพยากรคงที่ของ Baidu รหัสมีดังนี้:

ต่อไปนี้เป็นอินสแตนซ์ HTML ที่สมบูรณ์โดยใช้ AngularJS Directive และคลาส bootstrap

รหัส HTML

 <! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.cs src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp" ng-controller = "userctrl"> <div> <th> ชื่อ </th> <th> ล่าสุด </th> </tr> </thead> <tbody> <tr ng-repeat = "ผู้ใช้ในผู้ใช้"> <td> <button ng-click = "edituser (user.id)"> <span> user.lname}} </td> </tr> </tbody> </table> <hr> <button ng-click = "edituser ('ใหม่')"> <span> </span> สร้างผู้ใช้ใหม่ </button> <hr> <h3 ng-show = "แก้ไข"> สร้างผู้ใช้ใหม่: </h3 <div> <label> ชื่อ: </label> <div> <อินพุต type = "text" ng-model = "fname" ng-disabled = "! แก้ไข" placeHolder = "name"> </div> </div> <divel </div> <div> <dlable> รหัสผ่าน: </label> <div> <อินพุตประเภท = "รหัสผ่าน" ng-model = "passw1" placeholder = "รหัสผ่าน"> </div> </div> <darm> <label> รหัสผ่านซ้ำ: </label> <div> ng-disabled = "ข้อผิดพลาด || ไม่สมบูรณ์"> <span> </span> แก้ไข </button> </div> <script src = "myusers.js"> </script> </body> </html>

ผลการทำงาน:

การวิเคราะห์คำสั่ง

คำสั่ง Angularjs	อธิบาย
<html ng-app	กำหนดแอปพลิเคชันสำหรับองค์ประกอบ <html> (ไม่มีชื่อ)
<body ng-controller	กำหนดคอนโทรลเลอร์สำหรับองค์ประกอบ <body>
<tr ng-repeat	ลูปอาร์เรย์ของวัตถุผู้ใช้วัตถุผู้ใช้แต่ละรายการจะถูกวางไว้ในองค์ประกอบ <tr>
<ปุ่ม ng-click	เรียกฟังก์ชัน edituser () เมื่อคลิกองค์ประกอบ <button>
<h3 ng-show	หากแก้ไข = จริงแสดงองค์ประกอบ <h3>
<h3 ng-hide	หากแก้ไข = True ซ่อนองค์ประกอบ <h3>
<อินพุต ng-model	ผูก <อินพุต> องค์ประกอบสำหรับแอปพลิเคชัน
<ปุ่ม ng-disabled	หากเกิดข้อผิดพลาดหรือ ncomplete = True ปิดการใช้งานองค์ประกอบ <button>

การวิเคราะห์ชั้นเรียน bootstrap

องค์ประกอบ	คลาส bootstrap	คำนิยาม
<div>	คอนเทนเนอร์	คอนเทนเนอร์เนื้อหา
<table>	โต๊ะ	แผ่น
<table>	ลายตาราง	ตารางที่มีพื้นหลังลาย
<ปุ่ม>	btn	ปุ่ม
<ปุ่ม>	BTN-Success	ปุ่มความสำเร็จ
<span>	มดลูก	ไอคอนร่ายมนตร์
<span>	เพนซ์	ไอคอนดินสอ
<span>	ผู้ใช้กลีฟิคอน	ไอคอนผู้ใช้
<span>	การเก็บกล่อม	บันทึกไอคอน
<form>	รูปแบบ	ตารางระดับ
<div>	กลุ่ม	กลุ่ม
<label>	ฉลากควบคุม	แท็กคอนโทรลเลอร์
<label>	COL-SM-2	ครอบคลุม 2 คอลัมน์
<div>	COL-SM-10	ครอบคลุม 10 คอลัมน์

รหัส JavaScript

myusers.js

 Angular.module ('myapp', []). คอนโทรลเลอร์ ('userCtrl', ฟังก์ชั่น ($ scope) {$ scope.fname = ''; $ scope.lname = ''; $ scope.passw1 = '' $ scope.passw2 = '' fname: 'kim', lname: "pim"}, {id: 3, fname: 'sal', lname: "smith"}, {id: 4, fname: 'jack', lname: "Jones"}, {id: 5, fname: 'John', lname: }]; $ scope.edit = true; $ scope.error = false; $ scope.incomplete = false; $ scope.edituser = function (id) {if (id == 'ใหม่') {$ scope.edit = true; $ scope.fname = $ scope.users [id-1] .fname; {$ scope.test ();}); $ scope. $ watch ('fname', function () {$ scope.test ();}); $ scope. $ watch ('lname', ฟังก์ชั่น () {$ scope.test ();};};}; {ถ้า ($ scope.passw1! == $ scope.passw2) {$ scope.error = true; ! $ scope.passw2.length)) {$ scope.incomplete = true;}};});

การแยกวิเคราะห์รหัส JavaScript

คุณสมบัติขอบเขต	ใช้
$ scope.fname	ตัวแปรรุ่น (ชื่อผู้ใช้)
$ scope.lname	ตัวแปรรุ่น (นามสกุลของผู้ใช้)
$ scope.passw1	ตัวแปรรุ่น (รหัสผ่านผู้ใช้ 1)
$ scope.passw2	ตัวแปรรุ่น (รหัสผ่านผู้ใช้ 2)
$ scope.users	ตัวแปรรุ่น (อาร์เรย์ของผู้ใช้)
$ scope.edit	ตั้งค่าเป็นจริงเมื่อผู้ใช้คลิกเพื่อสร้างผู้ใช้
$ scope.error	หาก passw1 ไม่เท่ากับ passw2 ถูกตั้งค่าเป็นจริง
$ SCOPE.ONCINGTE	หากแต่ละฟิลด์ว่างเปล่า (ความยาว = 0) ถูกตั้งค่าเป็นจริง
$ scope.edituser	ตั้งค่าตัวแปรโมเดล
$ scope.watch	ตัวแปรโมเดลมอนิเตอร์
$ scope.test	ตรวจสอบข้อผิดพลาดและความสมบูรณ์ของตัวแปรโมเดล

ข้างต้นเป็นการรวบรวมข้อมูล bootstrap AngularJS เราจะเพิ่มในภายหลัง ฉันหวังว่านักเรียนที่สามารถช่วยโปรแกรม AngularJS