AngularJS Bootstrap

AngularJS style sheet disukai adalah Twitter Bootstrap, Twitter Bootstrap adalah kerangka front-end yang paling populer.

Lihat Bootstrap tutorial .

bootstrap

Anda dapat bergabung dengan Twitter Bootstrap aplikasi AngularJS Anda, Anda dapat menambahkan elemen kode berikut di <head> Anda:

Jika situs dalam negeri, dianjurkan untuk menggunakan Baidu repositori statis Bootstrap, kode berikut:

Berikut ini adalah contoh HTML lengkap dengan menggunakan AngularJS dan instruksi kelas Bootstrap.

kode HTML

<! DOCTYPE html>
<Html>
<Link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Tubuh ng-app = "myApp " ng-controller = "userCtrl">

<Class Div = "container">

<H3> Pengguna </ h3>

<Table class = "tabel tabel- belang">
<Thead> <tr>
<Th> Edit </ th>
<Th> Nama Pertama </ th >
<Th> Nama terakhir </ th >
</ Tr> </ thead>
<Tbody> <tr ng-repeat = "pengguna dalam pengguna">
<Td>
<Button kelas = "btn" ng -klik = "EditUser (user.id)">
<Span class = "glyphicon glyphicon- pensil"> </ span> & nbsp; & nbsp; Sunting
</ Tombol>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>

<Hr>
<Button kelas = "btn btn- sukses" ng-klik = "EditUser ( 'baru')">
<Span class = "glyphicon glyphicon- pengguna"> </ span> Create New Pengguna
</ Tombol>
<Hr>

<H3 ng-show = "edit "> Create New Pengguna: </ h3>
<H3 ng-hide = "edit "> Edit Pengguna: </ h3>

<Kelas Formulir = "bentuk-horisontal ">
<Class Div = "bentuk-kelompok ">
<Class Label = "col-sm -2 kontrol label"> Nama Pertama: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -Model = "fname" ng-disabled = "! Edit" placeholder = "Nama Depan">
</ Div>
</ Div>
<Class Div = "bentuk-kelompok ">
<Label class = "col-sm -2 kontrol label"> Nama terakhir: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -Model = "lname" ng-disabled = "! Edit" placeholder = "Nama terakhir">
</ Div>
</ Div>
<Class Div = "bentuk-kelompok ">
<Label class = "col-sm -2 kontrol label"> Password: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -Model = "passw1" placeholder = "Password">
</ Div>
</ Div>
<Class Div = "bentuk-kelompok ">
<Label class = "col-sm -2 kontrol label"> Ulangi: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -Model = "passw2" placeholder = "Ulangi Password">
</ Div>
</ Div>
</ Form>

<Hr>
<Button kelas = "btn btn- sukses" = "error || lengkap" ng-orang cacat>
<Span class = "glyphicon glyphicon- menyimpan"> </ span> Simpan Perubahan
</ Tombol>
</ Div>

<Script src = "myUsers.js"> </ script>
</ Body>
</ Html>

Coba »

perintah parsing

AngularJS arahan	deskripsi
<Html ng-aplikasi	Untuk <html> mendefinisikan sebuah aplikasi (tidak disebutkan namanya)
<Tubuh ng-controller	Untuk <body> mendefinisikan controller
<Tr ng-repeat	pengguna siklus array obyek, setiap objek pengguna dalam <tr> elemen.
<Tombol ng-klik	Ketika fungsi ini dipanggil EditUser klik <button> elemen ketika ()
<H3 ng-show	Jika Anda mengedit = Tampilan benar <h3> elemen
<H3 ng-hide	Jika Anda mengedit = true tersembunyi <h3> elemen
<Input ng-Model	Mengikat <input> elemen untuk aplikasi
<Tombol ng-orang cacat	Jika terjadi kesalahan atau ncomplete = true Nonaktifkan <button> elemen

kelas bootstrap analitis

elemen	kelas bootstrap	definisi
<Div>	wadah	Isi wadah
<Table>	tabel	tabel
<Table>	table-bergaris	Tabel latar belakang bergaris
<Tombol>	btn	push button
<Tombol>	btn-sukses	tombol sukses
<Span>	glyphicon	tanda pangkat ketentaraan
<Span>	glyphicon-pensil	ikon pensil
<Span>	glyphicon-friendly	ikon pengguna
<Span>	glyphicon-save	Simpan ikon
<Form>	bentuk-horisontal	meja horizontal
<Div>	bentuk-kelompok	formulir Grup
<Label>	kontrol label	kontroler Tags
<Label>	col-sm-2	lebih dari dua
<Div>	col-sm-10	lebih dari 10

kode JavaScript

myUsers.js

angular.module ( 'myApp', [] ). controller ( 'userCtrl', function ($ lingkup) {
$ Scope.fName = '';
$ Scope.lName = '';
$ Scope.passw1 = '';
$ Scope.passw2 = '';
$ Scope.users = [
{Id: 1, fname: ' Hege', LName: "pege"},
{Id: 2, Fname: ' Kim', LName: "Pim"},
{Id: 3, fname: ' Sal', LName: "Smith"},
{Id: 4, fname: ' Jack', LName: "Jones"},
{Id: 5, fname: ' John', LName: "Doe"},
{Id: 6, fname: ' Peter', LName: "Pan"}
];
$ Scope.edit = true;
$ Scope.error = false;
$ Scope.incomplete = false;

$ Scope.editUser = function (id) {
jika (id == 'baru') {
$ Scope.edit = true;
$ Scope.incomplete = true;
$ Scope.fName = '';
$ Scope.lName = '';
} Lain {
$ Scope.edit = false;
$ Scope.fName = $ scope.users [id-1] .fName;
$ Scope.lName = $ scope.users [id-1] .lName;
}
};

. $ Lingkup $ menonton ( 'passw1 ', function () {$ scope.test ();});
. $ Lingkup $ menonton ( 'passw2 ', function () {$ scope.test ();});
. $ Lingkup $ menonton ( 'fname ', function () {$ scope.test ();});
. $ Lingkup $ menonton ( 'LName ', function () {$ scope.test ();});

$ Scope.test = function () {
if ($ scope.passw1! == $ scope.passw2 ) {
$ Scope.error = true;
} Lain {
$ Scope.error = false;
}
$ Scope.incomplete = false;
if ($ scope.edit && (! $ scope.fName.length ||
! $ Scope.lName.length ||
! $ Scope.passw1.length ||! $ Scope.passw2.length)) {
$ Scope.incomplete = true;
}
};

});

analisis kode JavaScript

lingkup Properti	penggunaan
$ Scope.fName	variabel model (username)
$ Scope.lName	variabel model (nama pengguna)
$ Scope.passw1	variabel model (password pengguna 1)
$ Scope.passw2	variabel model (password pengguna 2)
$ Scope.users	variabel model (array dari pengguna)
$ Scope.edit	Hal ini diatur ke benar ketika pengguna mengklik untuk membuat user.
$ Scope.error	Jika passw1 tidak sama passw2 diatur ke benar
$ Scope.incomplete	Jika masing-masing bidang kosong (panjang = 0) diatur ke benar
$ Scope.editUser	Pengaturan variabel Model
$ Scope.watch	variabel model monitor
$ Scope.test	kesalahan validasi, dan kelengkapan variabel model

Sebelumnya: AngularJS validasi input

Berikutnya: AngularJS mengandung

AngularJS kuliah

AngularJS contoh

AngularJS Reference manual