angularjs Bootstrap

sprawdzania poprawności danych wejściowych angularjs: Poprzednia

Dalej: angularjs zawiera

Angularjs preferowany arkusz stylów jest Twitter Bootstrap, Twitter Bootstrap to najpopularniejszy framework front-end.

Zobacz poradnik Bootstrap .

bootstrap

Możesz dołączyć do Twitter Bootstrap aplikacji angularjs można dodać następujący element kodu w <head>:

Jeśli na miejscu w kraju, zaleca się używać Baidu repozytorium statyczne bootstrap następujący kod:

Poniżej znajduje się pełna przykładów HTML przy użyciu angularjs i Bootstrap instrukcji class.

Kod 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>
<Body ng-app = "myApp " NG-controller = "userCtrl">

<Div class = "container">

<H3> Użytkownicy </ h3>

<Class = "Tabela tabeli Tabeli- paski">
<THEAD> <tr>
<Th> Edytuj </ th>
<Th> Imię </ th >
<Th> Nazwisko </ th >
</ Tr> </ thead>
<Tbody> <tr NG-repeat = "user"> w użytkownikach
<Td>
<Class = Przycisk "btn" ng -Kliknij = "editUser (user.id)">
<Span class = "glyphicon glyphicon- ołówek"> </ span> & nbsp; & nbsp; Edycja
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>

<Hr>
<Class = Przycisk "btn btn- sukcesu" ng-click = "editUser (" nowy ")">
<Span class = "glyphicon glyphicon- user"> </ span> Create New User
</ Button>
<Hr>

<H3 ng-show = "edit "> Utwórz nowego użytkownika: </ h3>
<H3 ng-hide = "edit "> Edit User: </ h3>

<Class Form = "form-horizontal ">
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Imię: </ label>
<Div class = "kol-sm -10">
<Input type = "text" ng -Model = "fname" NG-disabled = "Edit" placeholder = "Imię">
</ Div>
</ Div>
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Nazwisko: </ label>
<Div class = "kol-sm -10">
<Input type = "text" ng -Model = "lname" NG-disabled = "Edit" placeholder = "Nazwisko">
</ Div>
</ Div>
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Hasło: </ label>
<Div class = "kol-sm -10">
<Wejście type = "password" ng -Model = "passw1" placeholder = "Hasło">
</ Div>
</ Div>
<Div class = "form-grupa ">
<Class Label = "kol-sm -2 kontrolno-label"> Powtórz: </ label>
<Div class = "kol-sm -10">
<Wejście type = "password" ng -Model = "passw2" placeholder = "Powtórz hasło">
</ Div>
</ Div>
</ Form>

<Hr>
<Class = Przycisk "btn btn- sukcesu" NG-disabled = "Błąd || niekompletne">
<Span class = "glyphicon glyphicon- zapisz"> </ span> Zapisz zmiany
</ Button>
</ Div>

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

Spróbuj »

parsowanie poleceń

angularjs dyrektyw	opis
<Html ng-app	Dla <html> definiuje aplikacji (nienazwany)
<Body ng kontroler	Dla <body> element definiuje kontroler
<Tr ng-repeat	użytkownicy rowerowe tablicę obiektów, każdy obiekt użytkownika w <tr> elementu.
<Przycisk ng kliknięciem	Gdy funkcja jest wywoływana editUser kliknij przycisk <> Element kiedy ()
<H3 ng-show	Jeśli edytujesz = true wyświetlania elementu <h3>
<H3 ng-hide	Jeśli edytujesz = true ukrytych elementu <h3>
<Wejście ng model	Oprawa <input> element stosowania
<Przycisk ng niepełnosprawnych	Jeśli wystąpi błąd lub ncomplete = true Wyłącz <button> Element

Bootstrap klasy analitycznej

element	bootstrap klasy	definicje
<Div>	pojemnik	Zawartość pojemnika
<Table>	stół	stół
<Table>	Stół paski	Tabela paski tle
<Button>	btn	przycisk
<Button>	btn-success	przycisk sukces
<Span>	glyphicon	szewron
<Span>	glyphicon-ołówek	ikona ołówka
<Span>	glyphicon użytkowników	ikona użytkownika
<Span>	glyphicon-save	Zapisz ikona
<Form>	form-poziome	poziomy stół
<Div>	Forma-group	formularz Grupa
<Label>	kontrolno-label	kontroler Tagi
<Label>	kol-SM-2	W ciągu dwóch
<Div>	kol-SM-10	Powyżej 10

Kod JavaScript

myUsers.js

angular.module ( "myApp", [] ). Regulator ( "userCtrl ', function ($ zakres) {
$ 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: " Piotr", lname: "Pan"}
];
$ Scope.edit = true;
$ Scope.error = false;
$ Scope.incomplete = false;

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

. $ Zakres $ zegarek ( "passw1 ', function () {$ scope.test ();});
. $ Zakres $ zegarek ( "passw2 ', function () {$ scope.test ();});
. $ Zakres $ zegarek ( "fname ", function () {$ scope.test ();});
. $ Zakres $ zegarek ( "lname ', function () {$ scope.test ();});

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

});

Analiza kodu JavaScript

Właściwości Zakres	stosowanie
$ Scope.fName	zmiennych modelu (nazwa użytkownika)
$ Scope.lName	zmiennych modelu (nazwa użytkownika)
$ Scope.passw1	zmiennych modelu (hasło użytkownika) 1
$ Scope.passw2	zmiennych modelu (hasło użytkownika 2)
$ Scope.users	zmiennych modelu (tablice użytkowników)
$ Scope.edit	Jest ustawiona na wartość true, gdy użytkownik kliknie, aby utworzyć użytkownika.
$ Scope.error	Jeśli passw1 nie równa passw2 ustawiona na true
$ Scope.incomplete	Jeśli każde pole jest puste (długość = 0) jest ustawiony na true
$ Scope.editUser	Ustawianie zmiennych modelu
$ Scope.watch	zmienne modelu monitora
$ Scope.test	błędy sprawdzania poprawności i kompletności zmiennych modelu