AngularJS Bootstrap

Previous: AngularJS input validation

Next: AngularJS contains

AngularJS preferred style sheet is Twitter Bootstrap, Twitter Bootstrap is the most popular front-end framework.

See Bootstrap tutorial .

Bootstrap

You can join the Twitter Bootstrap your AngularJS application, you can add the following code element in your <head>:

If the site in the country, it is recommended to use Baidu static repository Bootstrap, the following code:

The following is a complete HTML example using AngularJS and Bootstrap class instruction.

HTML code

<! 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> Users </ h3>

<Table class = "table table- striped">
<Thead> <tr>
<Th> Edit </ th>
<Th> First Name </ th >
<Th> Last Name </ th >
</ Tr> </ thead>
<Tbody> <tr ng-repeat = "user in users">
<Td>
<Button class = "btn" ng -click = "editUser (user.id)">
<Span class = "glyphicon glyphicon- pencil"> </ span> & nbsp; & nbsp; Edit
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>

<Hr>
<Button class = "btn btn- success" ng-click = "editUser ( 'new')">
<Span class = "glyphicon glyphicon- user"> </ span> Create New User
</ Button>
<Hr>

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

<Form class = "form-horizontal ">
<Div class = "form-group ">
<Label class = "col-sm -2 control-label"> First Name: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "fName" ng-disabled = "! Edit" placeholder = "First Name">
</ Div>
</ Div>
<Div class = "form-group ">
<Label class = "col-sm -2 control-label"> Last Name: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "lName" ng-disabled = "! Edit" placeholder = "Last Name">
</ Div>
</ Div>
<Div class = "form-group ">
<Label class = "col-sm -2 control-label"> Password: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -model = "passw1" placeholder = "Password">
</ Div>
</ Div>
<Div class = "form-group ">
<Label class = "col-sm -2 control-label"> Repeat: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -model = "passw2" placeholder = "Repeat Password">
</ Div>
</ Div>
</ Form>

<Hr>
<Button class = "btn btn- success" ng-disabled = "error || incomplete">
<Span class = "glyphicon glyphicon- save"> </ span> Save Changes
</ Button>
</ Div>

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

try it"

Command parsing

AngularJS directives	description
<Html ng-app	For the <html> element defines an application (unnamed)
<Body ng-controller	For the <body> element defines a controller
<Tr ng-repeat	Cycle users an array of objects, each user object in a <tr> element.
<Button ng-click	When the function is called editUser click <button> element when ()
<H3 ng-show	If you edit = true Display <h3> element
<H3 ng-hide	If you edit = true hidden <h3> element
<Input ng-model	Binding <input> element for the application
<Button ng-disabled	If an error occurs or ncomplete = true Disable <button> element

Bootstrap class of analytic

element	Bootstrap class	definition
<Div>	container	The contents of the container
<Table>	table	form
<Table>	table-striped	Table striped background
<Button>	btn	Push button
<Button>	btn-success	Success button
<Span>	glyphicon	Chevron
<Span>	glyphicon-pencil	Pencil icon
<Span>	glyphicon-user	User icon
<Span>	glyphicon-save	Save icon
<Form>	form-horizontal	Horizontal table
<Div>	form-group	Form Group
<Label>	control-label	Controller Tags
<Label>	col-sm-2	Over two
<Div>	col-sm-10	Over 10

JavaScript code

myUsers.js

angular.module ( 'myApp', [] ). controller ( 'userCtrl', function ($ scope) {
$ 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 == 'new') {
$ 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;
}
};

. $ scope $ watch ( 'passw1 ', function () {$ scope.test ();});
. $ scope $ watch ( 'passw2 ', function () {$ scope.test ();});
. $ scope $ watch ( 'fName ', function () {$ scope.test ();});
. $ scope $ watch ( '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;
}
};

});

JavaScript code analysis

Scope Properties	use
$ Scope.fName	Model variables (username)
$ Scope.lName	Model variables (user name)
$ Scope.passw1	Model variables (user password 1)
$ Scope.passw2	Model variables (user password 2)
$ Scope.users	Model variables (arrays of users)
$ Scope.edit	It is set to true when the user clicks to create a user.
$ Scope.error	If passw1 not equal passw2 set to true
$ Scope.incomplete	If each field is empty (length = 0) is set to true
$ Scope.editUser	Setting model variables
$ Scope.watch	Monitor model variables
$ Scope.test	Validation errors, and completeness of model variables