YouTipAngularJS Bootstrap
-- Learning is not just about technology, but also about dreams!
AngularJS Tutorial
- AngularJS Tutorial
- AngularJS Introduction
- AngularJS Expressions
- AngularJS Directives
- AngularJS Models
- AngularJS Scope
- AngularJS Controllers
- AngularJS Filters
- AngularJS Service
- AngularJS Http
- AngularJS Select
- AngularJS Tables
- AngularJS SQL
- AngularJS HTML DOM
- AngularJS Events
- AngularJS Modules
- AngularJS Forms
- AngularJS Input Validation
- AngularJS API
- AngularJS Bootstrap
- AngularJS Includes
- AngularJS Animations
- AngularJS Dependency Injection
- AngularJS Routing
- AngularJS Applications
AngularJS Examples
AngularJS Reference Manual
AngularJS Bootstrap
AngularJS's preferred stylesheet is Twitter Bootstrap. Twitter Bootstrap is currently the most popular front-end framework.
View the Bootstrap tutorial.
Bootstrap
You can add Twitter Bootstrap to your AngularJS application by adding the following code to your <head> element:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
If the site is in China, it is recommended to use Baidu's static resource library for Bootstrap, with the following code:
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
The following is a complete HTML example using AngularJS directives and Bootstrap classes.
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> 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>
Directive Explanation
| AngularJS Directive | Description |
|---|---|
<html ng-app |
Defines an application (unnamed) for the <html> element |
<body ng-controller |
Defines a controller for the <body> element |
<tr ng-repeat |
Loops through the users object array, placing each user object in a <tr> element |
<button ng-click |
Calls the function editUser() when the <button> element is clicked |
<h3 ng-show |
Shows the <h3> element if edit = true |
<h3 ng-hide |
Hides the <h3> element if edit = true |
<input ng-model |
Binds the <input> element to the application |
<button ng-disabled |
Disables the <button> element if an error occurs or incomplete = true |
Bootstrap Class Explanation
| Element | Bootstrap Class | Definition |
|---|---|---|
<div> |
container |
Content container |
<table> |
table |
Table |
<table> |
table-striped |
Table with striped background |
<button> |
btn |
Button |
<button> |
btn-success |
Success button |
<span> |
glyphicon |
Glyphicon icon |
<span> |
glyphicon-pencil |
Pencil icon |
<span> |
glyphicon-user |
User icon |
<span> |
glyphicon-save |
Save icon |
<form> |
form-horizontal |
Horizontal form |
<div> |
form-group |
Form group |
<label> |
control-label |
Control label |
<label> |
col-sm-2 |
Span 2 columns |
<div> |
col-sm-10 |
Span 10 columns |
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.fName;
$scope.lName = $scope.users.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 Explanation
| Scope Property | Purpose |
|---|---|
$scope.fName |
Model variable (user's first name) |
$scope.lName |
Model variable (user's last name) |
$scope.passw1 |
Model variable (user password 1) |
$scope.passw2 |
Model variable (user password 2) |
$scope.users |
Model variable (array of users) |
$scope.edit |
Set to true when the user clicks to create a user |
$scope.error |
Set to true if passw1 is not equal to passw2 |
$scope.incomplete |
Set to true if any field is empty (length = 0) |
$scope.editUser |
Sets model variables |
$scope.watch |
Monitors model variables |
$scope.test |
Validates errors and completeness of model variables |
AngularJS API
AngularJS Includes
Byte Ark Coding Plan
Supports major large language models including Doubao, GLM, DeepSeek, Kimi, MiniMax, etc., with stable and reliable official supply.
¥9.9 / month Subscribe Now
iFlytek Star Coding Plan
Includes free model call quotas for DeepSeek, GLM, Kimi, MiniMax, a one-stop experience and deployment platform.
¥3.9 / month Subscribe Now
Notes
Heart Follows Fate
131***45488@163.com
29
In the test() watch function, when in edit mode, if the password and repeat password are empty, the save button can still be clicked. This is because in edit mode, $scope.edit=false, $scope.incomplete=false. Since there's no check for empty passwords, $scope.error=false.
Therefore, there are two solutions: one is to check if password and repeat password are empty and set $scope.error=true;
The second is to separate the create user and edit user states. When creating a user, all fields cannot be empty. When editing a user, the password cannot be empty.
if ($scope.edit) {
if (!$scope.fName.length || !$scope.lName.length ||!$scope.passw1.length || !$scope.passw2.length) {
$scope.incomplete=true;
}
}else{
if (!$scope.passw1.length || !$scope.passw2.length) {
$scope.incomplete=true;
}
}
Heart Follows Fate
131***45488@163.com
8 years ago (2018-03-23)