减小字体
增大字体- ·上一篇文章：AngularJS API
- ·下一篇文章：AngularJS 包含
AngularJS Bootstrap
AngularJS BootstrapAngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。查看 Bootstrap教程。Bootstrap你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。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><bodyng-app="myApp" ng-controller="userCtrl"><div class="container"><h3>Users</h3><tableclass="table table-striped"> <thead><tr> <th>Edit</th> <th>FirstName</th> <th>Last Name</th> </tr></thead> <tbody><trng-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">EditUser:
</h3><form class="form-horizontal"><div class="form-group"> <label class="col-sm-2 control-label">First Name:
</label> <divclass="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> <divclass="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> <divclass="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> <divclass="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> SaveChanges</button></div><script src = "myUsers.js"></script></body></html>尝试一下 ?指令解析AngularJS 指令描述<html ng-app为 <html> 元素定义一个应用(未命名)<body ng-controller为 <body> 元素定义一个控制器<tr ng-repeat循环 users 对象数组，每个 user 对象放在 <tr> 元素中。<button ng-click当点击 <button> 元素时调用函数 editUser()<h3 ng-show 如果 edit = true 显示 <h3> 元素 <h3 ng-hide如果 edit = true 隐藏 <h3> 元素<input ng-model为应用程序绑定 <input> 元素<button ng-disabled如果发生错误或者 incomplete = true 禁用 <button> 元素Bootstrap 类解析元素Bootstrap 类定义<div>container内容容器<table>table表格<table>table-striped带条纹背景的表格<button>btn按钮<button>btn-success成功按钮<span>glyphicon字形图标<span>glyphicon-pencil铅笔图标<span>glyphicon-user用户图标<span>glyphicon-save保存图标<form>form-horizontal水平表格<div>form-group表单组<label>control-label控制器标签<label>col-sm-2跨越 2 列<div>col-sm-10跨越 10 列JavaScript 代码myUsers.jsangular.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 代码解析Scope 属性用途$scope.fName模型变量 (用户名)$scope.lName模型变量 (用户姓)$scope.passw1模型变量 (用户密码 1)$scope.passw2模型变量 (用户密码 2)$scope.users模型变量 (用户的数组)$scope.edit当用户点击创建用户时设置为true。$scope.error如果 passw1 不等于 passw2 设置为 true$scope.incomplete如果每个字段都为空(length = 0)设置为 true $scope.editUser设置模型变量$scope.watch监控模型变量$scope.test验证模型变量的错误和完整性
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。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><bodyng-app="myApp" ng-controller="userCtrl"><div class="container"><h3>Users</h3><tableclass="table table-striped"> <thead><tr> <th>Edit</th> <th>FirstName</th> <th>Last Name</th> </tr></thead> <tbody><trng-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">EditUser:
</h3><form class="form-horizontal"><div class="form-group"> <label class="col-sm-2 control-label">First Name:
</label> <divclass="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> <divclass="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> <divclass="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> <divclass="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> SaveChanges</button></div><script src = "myUsers.js"></script></body></html>尝试一下 ?指令解析AngularJS 指令描述<html ng-app为 <html> 元素定义一个应用(未命名)<body ng-controller为 <body> 元素定义一个控制器<tr ng-repeat循环 users 对象数组，每个 user 对象放在 <tr> 元素中。<button ng-click当点击 <button> 元素时调用函数 editUser()<h3 ng-show 如果 edit = true 显示 <h3> 元素 <h3 ng-hide如果 edit = true 隐藏 <h3> 元素<input ng-model为应用程序绑定 <input> 元素<button ng-disabled如果发生错误或者 incomplete = true 禁用 <button> 元素Bootstrap 类解析元素Bootstrap 类定义<div>container内容容器<table>table表格<table>table-striped带条纹背景的表格<button>btn按钮<button>btn-success成功按钮<span>glyphicon字形图标<span>glyphicon-pencil铅笔图标<span>glyphicon-user用户图标<span>glyphicon-save保存图标<form>form-horizontal水平表格<div>form-group表单组<label>control-label控制器标签<label>col-sm-2跨越 2 列<div>col-sm-10跨越 10 列JavaScript 代码myUsers.jsangular.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 代码解析Scope 属性用途$scope.fName模型变量 (用户名)$scope.lName模型变量 (用户姓)$scope.passw1模型变量 (用户密码 1)$scope.passw2模型变量 (用户密码 2)$scope.users模型变量 (用户的数组)$scope.edit当用户点击创建用户时设置为true。$scope.error如果 passw1 不等于 passw2 设置为 true$scope.incomplete如果每个字段都为空(length = 0)设置为 true $scope.editUser设置模型变量$scope.watch监控模型变量$scope.test验证模型变量的错误和完整性
AngularJS Bootstrap
