AngularJS Bootstrap | 菜鸟教程
菜鸟教程 -- 学的不仅是技术，更是梦想！
首页
HTML
CSS
JavaScript
Vue
Bootstrap
NodeJS
Python3
Python2
Java
C++
C#
Go
SQL
Linux
jQuery
本地书签
首页
HTML
CSS
JS
本地书签
Search
Python3 教程
Python2 教程
Vue3 教程
vue2 教程
Bootstrap3 教程
Bootstrap4 教程
Bootstrap5 教程
Bootstrap2 教程
AngularJS 教程
AngularJS 教程
AngularJS 简介
AngularJS 表达式
AngularJS 指令
AngularJS 模型
AngularJS Scope(作用域)
AngularJS 控制器
AngularJS 过滤器
AngularJS Service
AngularJS Http
AngularJS Select AngularJS 表格 AngularJS SQL
AngularJS HTML DOM
AngularJS 事件
AngularJS 模块
AngularJS 表单
AngularJS 输入验证
AngularJS API
AngularJS Bootstrap
AngularJS 包含
AngularJS 动画
AngularJS 依赖注入
AngularJS 路由
AngularJS 应用
AngularJS 实例
AngularJS 实例
AngularJS 参考手册
AngularJS 参考手册
AngularJS 输入验证
AngularJS 包含
AngularJS Bootstrap
AngularJS 的首选样式表是 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>
<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>
尝试一下 »
指令解析
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.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 代码解析
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 输入验证
AngularJS 包含
1 篇笔记
写笔记
#0 心动随缘 131***45488@163.com 21那个 test() 的监听函数里，当如果是编辑状态时，密码和重复密码为空时，保存按钮也可以点，因为编辑状态时 $scope.edit=false，$scope.incomplete=false, 因为没有判断密码和重复密码为空，所以 $scope.error=false;
所以这个有两种方法，一种是判断密码和重复密码为空时让 $scope.error=true;
第二种就是分开创建用户和编辑用户两种状态，创建用户时，所有都不能为空，编辑用户时，密码不能为空。
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;
}心动随缘 心动随缘 131***45488@163.com5年前 (2018-03-23)
点我分享笔记
取消
分享笔记
昵称昵称 (必填)
邮箱邮箱 (必填)
引用地址引用地址
分类导航
HTML / CSSHTML 教程HTML5 教程CSS 教程CSS3 教程Bootstrap3 教程Bootstrap4 教程Bootstrap5 教程Font Awesome 教程Foundation 教程 JavaScriptJavaScript 教程HTML DOM 教程jQuery 教程AngularJS 教程AngularJS2 教程Vue.js 教程Vue3 教程React 教程TypeScript 教程jQuery UI 教程jQuery EasyUI 教程Node.js 教程AJAX 教程JSON 教程Echarts 教程Chart.js 教程Highcharts 教程Google 地图 教程 服务端Python 教程Python2.x 教程Linux 教程Docker 教程Ruby 教程Java 教程C 教程C++ 教程Perl 教程Servlet 教程JSP 教程Lua 教程Rust 教程Scala 教程Go 教程PHP 教程数据结构与算法Django 教程Zookeeper 教程设计模式正则表达式Maven 教程Verilog 教程ASP 教程AppML 教程VBScript 教程 数据库SQL 教程MySQL 教程PostgreSQL 教程SQLite 教程MongoDB 教程Redis 教程Memcached 教程 数据分析Python 教程NumPy 教程Pandas 教程Matplotlib 教程Scipy 教程R 教程Julia 教程 移动端Android 教程Swift 教程jQuery Mobile 教程ionic 教程Kotlin 教程 XML 教程XML 教程DTD 教程XML DOM 教程XSLT 教程XPath 教程XQuery 教程XLink 教程XPointer 教程XML Schema 教程XSL-FO 教程SVG 教程 ASP.NETASP.NET 教程C# 教程Web Pages 教程Razor 教程MVC 教程Web Forms 教程 Web ServiceWeb Service 教程WSDL 教程SOAP 教程RSS 教程RDF 教程 开发工具Eclipse 教程Git 教程Svn 教程Markdown 教程 网站建设HTTP 教程网站建设指南浏览器信息网站主机教程TCP/IP 教程W3C 教程网站品质
Advertisement
反馈/建议
在线实例
·HTML 实例
·CSS 实例
·JavaScript 实例
·Ajax 实例
·jQuery 实例
·XML 实例
·Java 实例
字符集&工具
· HTML 字符集设置
· HTML ASCII 字符集
· JS 混淆/加密
· PNG/JPEG 图片压缩
· HTML 拾色器
· JSON 格式化工具
· 随机数生成器
最新更新
·
Go fmt.Printf ...
·
CSS backdrop-filte
·
使用 JS 的 down...
·
Navigator produ...
·
Navigator onLin...
·
Navigator langu...
·
Navigator geolo...
站点信息
·
意见反馈
·
免责声明
·
关于我们
·
文章归档
关注微信
Copyright 2013-2022 菜鸟教程
runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1
微信关注