AngularJS Bootstrap
AngularJS 的首选样式表是 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代码:
<!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 | 如果发生错误或者 ncomplete = 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 列 |
JS代码:
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 API
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 如果发生错误或者 ncomplete = 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;
}
}; });
JS代码解析:
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的更多相关文章
- Play1+angularjs+bootstrap ++ (idea + livereload)
我的web开发最强组合:Play1+angularjs+bootstrap ++ (idea + livereload) 时间 2012-12-26 20:57:26 Freewind.me原文 ...
- AngularJS -- Bootstrap(启动器)(转载)
AngularJS -- Bootstrap(启动器) 点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) ...
- AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框
AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...
- 【17】AngularJS Bootstrap
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. Bootstrap 你 ...
- Salesforce + AngularJS + Bootstrap
也可以分成三步: 1. 添加css和js引用: <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3. ...
- 前端MVC学习总结(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...
- AngularJs+bootstrap搭载前台框架——准备工作
1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,AngularJs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包 ...
- 前端MVC学习笔记(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...
- AngularJS -- Bootstrap(启动器)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) 这章介绍了Angular的初始化过程,以及如何在必要的时候 ...
随机推荐
- 软件工程(FZU2015)赛季得分榜,第9回合
目录 第一回合 第二回合 第三回合 第四回合 第五回合 第6回合 第7回合 第8回合 第9回合 第10回合 第11回合 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分 ...
- C# 使用网易邮箱发送邮件
代码如下,值得注意的有一下几点:1.网易要求使用代理密码而不暴露邮箱密码2.要求邮箱开通smtp服务3.要求邮件发送者邮箱和认证的邮箱地址一致. private void SendEmail(stri ...
- 发布ASP.NET Core网站到IIS
打开VS2015,新建项目: 选择模板,取消身份验证: 项目加载完成后就可以运行了: 下面要发布到IIS: 需要安装从IIS到Kestrel server的反向代理,下载地址:.NET Core Wi ...
- Extjs 知识体系1-dom操作
操作dom 主要是Ext.element,主要是简单的操作 Ext.dom.CompositeElement // 操作dom集合 ps:Extjs 使用字面量{} 形式,不支持链式操作 一.获取元素 ...
- 【CityHunter】服务器端设计思路
设计服务端程序首先我考虑到的是通讯传输方式的设计,按照CityHunter的特殊性,其具有两种使用场景: 仅用于查看当前信息状态.搜索周边环境.对信息的实时性要求不高的一些场景: 用于攻略藏宝图或Ch ...
- <<< Jquery查找元素、选择器使用方法总结
$("#myDiv"); //根据给定的ID匹配一个元素,用于搜索id 属性中给定的值,id属性必须是唯一的 $("div"); //根据给定的元素名匹配所有元 ...
- PHP 流程管理
添加新流程页面: <div> 请选择流程节点:<br /><br /> <?php session_start(); include("../DBD ...
- docker windows 7 mysql安装使用教程
mysql 1. 镜像的下载 Docker pull MySQL 可以从https://docker.cn/docker/mysql 看到官方的同步镜像. 大约400多M. 2. 运行 每个镜像都有一 ...
- 深入理解redis持久化
持久化方式: 快照(RDB)方式,默认方式,文件以二进制方式保存到RDB文件. 文件追加(AOF)方式,文件以协议文本的方式write到AOF文件. 作用,重启后的数据恢复.当两种方式都启用时,red ...
- [Unity] 在协程中等待指定的毫秒
先写一个静态类: /// <summary> /// 公用基础函数库 /// <remarks>作者: YangYxd</remarks> /// </sum ...