AngularJS Bootstrap

validação de entrada AngularJS: Anterior

AngularJS folha de estilo preferida é Twitter Bootstrap, Twitter Bootstrap é a estrutura de front-end mais populares.

Bootstrap

Você pode participar do Twitter Bootstrap sua aplicação AngularJS, você pode adicionar o seguinte elemento de código em seu <head>:

Se o site no país, recomenda-se usar Baidu repositório estática Bootstrap, o seguinte código:

O que se segue é um exemplo HTML completo utilizando AngularJS e instrução class Bootstrap.

código 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> Usuários </ h3>

<Class = "Tabela mesa- tabela listrado">
<Thead> <tr>
<Th> Editar </ th>
<Th> Nome </ th >
<Th> Apelido </ th >
</ Tr> </ thead>
<Tbody> <tr ng-repeat = "usuário em usuários">
<Td>
<Classe Button = "btn" ng -clique = "edituser (user.id)">
<Span class = "glyphicon glyphicon- lápis"> </ span> & nbsp; & nbsp; Editar
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>

<Hr>
<Classe Button = "btn btn- sucesso" ng clique com o botão = "edituser (" nova ")">
<Span class = "glyphicon glyphicon- usuário"> </ span> Criar Novo Usuário
</ Button>
<Hr>

<H3 ng-show = "Editar "> Criar novo usuário: </ h3>
<H3 ng-hide = "Editar "> Editar usuário: </ h3>

<Classe Form = "form-horizontal ">
<Div class = "form-grupo ">
<Class Label = "col-sm -2 controle-label"> Nome: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "fName" ng-disabled = "! Edit" espaço reservado = "Nome">
</ Div>
</ Div>
<Div class = "form-grupo ">
<Label class = "col-sm -2 controle-label"> Sobrenome: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "lName" ng-disabled = "! Edit" espaço reservado = "Last Name">
</ Div>
</ Div>
<Div class = "form-grupo ">
<Label class = "col-sm -2 controle-label"> Senha: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -model = "passw1" espaço reservado = "senha">
</ Div>
</ Div>
<Div class = "form-grupo ">
<Label class = "col-sm -2 controle-label"> Repetir: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -model = "passw2" espaço reservado = "Repetir senha">
</ Div>
</ Div>
</ Form>

<Hr>
<Classe Button = "btn btn- sucesso" = "erro || incompleto" ng-disabled>
<Span class = "glyphicon glyphicon- salvar"> </ span> Save Changes
</ Button>
</ Div>

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

tente »

análise de comando

AngularJS directivas	descrição
<Html ng-app	Para o elemento <html> define um aplicativo (sem nome)
<Ng-controlador do corpo	Para o elemento <body> define um controlador
<Tr ng-repeat	usuários do ciclo de uma matriz de objetos, cada objeto usuário em um elemento <tr>.
<Button ng clique com o botão	Quando a função é chamada edituser clique elemento <button> when ()
<Ng-show H3	Se você editar = true exibição <h3> elemento
<H3 ng-esconde	Se você editar = true escondidos <h3> elemento
<Ng-modelo Input	Vinculativo <input> elemento para a aplicação
<Button ng-disabled	Se ocorrer um erro ou ncomplete = true Disable elemento <button>

classe Bootstrap de analítica

elemento	classe Bootstrap	definições
<Div>	recipiente	Os conteúdos do recipiente
<Table>	mesa	mesa
<Table>	risca-de-mesa	Fundo listrado Tabela
<Button>	btn	botão de pressão
<Button>	btn-sucesso	botão de sucesso
<Span>	glyphicon	divisa
<Span>	glyphicon-lápis	ícone do lápis
<Span>	glyphicon pelo usuário	ícone de usuário
<Span>	glyphicon-save	Salvar ícone
<Form>	form-horizontal	mesa horizontal
<Div>	form-grupo	Grupo Form
<Label>	controle de rótulo	controller Tags
<Label>	col-sm-2	Mais de dois
<Div>	col-sm-10	Mais de 10

código JavaScript

myUsers.js

angular.module ( 'myApp', [] ). controlador ( 'userCtrl', function ($ escopo) {
$ 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) {
if (id == 'novo') {
$ 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;
}
};

. $ Âmbito $ relógio ( 'passw1 ', function () {$ scope.test ();});
. $ Âmbito $ relógio ( 'passw2 ', function () {$ scope.test ();});
. $ Âmbito $ relógio ( 'fName ', function () {$ scope.test ();});
. $ Âmbito $ relógio ( '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;
}
};

});

análise de código JavaScript

Propriedades de escopo	uso
$ Scope.fName	variáveis do modelo (nome de usuário)
$ Scope.lName	variáveis do modelo (nome de usuário)
$ Scope.passw1	variáveis do modelo (senha de usuário) 1
$ Scope.passw2	variáveis do modelo (senha de usuário 2)
$ Scope.users	variáveis do modelo (matrizes de usuários)
$ Scope.edit	Ele é definido como true quando o usuário clica para criar um usuário.
$ Scope.error	Se passw1 não é igual passw2 definido como verdadeiro
$ Scope.incomplete	Se cada campo está vazio (comprimento = 0) é definido como verdadeiro
$ Scope.editUser	Definir variáveis do modelo
$ Scope.watch	variáveis do modelo de monitor
$ Scope.test	erros de validação e completude das variáveis do modelo

validação de entrada AngularJS: Anterior

Seguinte: AngularJS contém

AngularJS curso

AngularJS Exemplos

AngularJS manual de referência