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 相关文章推荐
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
Vue组件之单向数据流的解决方法
Nov 10 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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
PHP XML error parsing SOAP payload on line 1
2010/06/17 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
浅析php数据类型转换
2014/01/09 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php集成开发环境详解
2019/09/24 PHP
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python检测数据类型的方法总结
2019/05/20 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
毕业生求职推荐信
2013/11/04 职场文书
家长给老师的道歉信
2014/01/13 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
移交协议书
2014/08/19 职场文书
初中差生评语
2014/12/29 职场文书
岳麓书院导游词
2015/02/03 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js