AngularJS Bootstrap详细介绍及实例代码


Posted in Javascript onJuly 28, 2016

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>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//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>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<h3>Users</h3>

<table class="table table-striped">
 <thead>
 <tr>
  <th>编辑</th>
  <th>名</th>
  <th>姓</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>编辑
  </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>创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

<form class="form-horizontal">
 <div class="form-group">
 <label class="col-sm-2 control-label">名:</label>
 <div class="col-sm-10">
 <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
 </div>
 </div> 
 <div class="form-group">
 <label class="col-sm-2 control-label">姓:</label>
 <div class="col-sm-10">
 <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">密码:</label>
 <div class="col-sm-10">
 <input type="password" ng-model="passw1" placeholder="密码">
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">重复密码:</label>
 <div class="col-sm-10">
 <input type="password" ng-model="passw2" placeholder="重复密码">
 </div>
 </div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>修改
</button>

</div>

<script src="myUsers.js"></script>

</body>
</html>

运行结果:

AngularJS Bootstrap详细介绍及实例代码

AngularJS Bootstrap详细介绍及实例代码

指令解析

元素中。
AngularJS 指令 描述
为 元素定义一个应用(未命名)

元素定义一个控制器
循环 users 对象数组,每个 user 对象放在
当点击

如果 edit = true 显示

元素

如果 edit = true 隐藏

元素

为应用程序绑定 元素
如果发生错误或者 ncomplete = true 禁用

Bootstrap 类解析

元素 Bootstrap 类 定义
container 内容容器
table 表格
table-striped 带条纹背景的表格
btn 按钮
btn-success 成功按钮
glyphicon 字形图标
glyphicon-pencil 铅笔图标
glyphicon-user 用户图标
glyphicon-save 保存图标
form-horizontal 水平表格
form-group 表单组
control-label 控制器标签
col-sm-2 跨越 2 列
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 Bootstrap 资料的整理,后续继续补充,希望能帮助编程AngularJS的同学。

Javascript 相关文章推荐
JavaScript 事件参考手册
Dec 24 Javascript
走出JavaScript初学困境—js初学
Dec 29 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
js控制input框只读实现示例
Jan 20 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 #Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 #Javascript
AngularJS中的API(接口)简单实现
Jul 28 #Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 #Javascript
AngularJS 输入验证详解及实例代码
Jul 28 #Javascript
jquery实用技巧之输入框提示语句
Jul 28 #Javascript
jQuery stop()用法实例详解
Jul 28 #Javascript
You might like
php5 图片验证码实现代码
2009/12/11 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
python保存数据到本地文件的方法
2018/06/23 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
基于Python绘制个人足迹地图
2020/06/01 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
自主招生自荐信范文
2013/12/04 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
欢迎横幅标语
2014/06/17 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
golang日志包logger的用法详解
2021/05/05 Golang