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 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
Vue混入mixins滚动触底的方法
Nov 22 Javascript
vue实现图片上传到后台
Jun 29 Javascript
vue使用过滤器格式化日期
Jan 20 Vue.js
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简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP中soap的用法实例
2014/10/24 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
php适配器模式简单应用示例
2019/10/23 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
2013/08/01 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
javascript制作2048游戏
2015/03/30 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
node+multer实现图片上传的示例代码
2020/02/18 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
应届生保险求职信
2013/11/11 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
退伍军人感言
2015/08/01 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript