ylbtech-AngularJS：Bootstrap
1.返回顶部
1、

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://cdn.static.runoob.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 指令 描述
<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 验证模型变量的错误和完整性
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

AngularJS：Bootstrap的更多相关文章

  1. 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目

    环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd ...

  2. Angularjs与bootstrap.datetimepicker结合实现日期选择器

    http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...

  3. AngularJS：实例

    ylbtech-AngularJS:实例 1.返回顶部 1. AngularJS 实例 实例 您可以在线编辑实例,然后点击按钮查看结果. AngularJS 实例 <div ng-app=&qu ...

  4. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  5. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  6. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  7. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  8. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  9. 转载：bootstrap, boosting, bagging 几种方法的联系

    转:http://blog.csdn.net/jlei_apple/article/details/8168856 这两天在看关于boosting算法时,看到一篇不错的文章讲bootstrap, ja ...

随机推荐

  1. poj 3080 Blue Jeans【字符串处理+ 亮点是：字符串函数的使用】

    题目:http://poj.org/problem?id=3080 Sample Input 3 2 GATACCAGATACCAGATACCAGATACCAGATACCAGATACCAGATACCA ...

  2. 安装配置Apollo-Prota web中心平台

    首先要求2g以上内存哈,JDK1.8 搭建数据库 创建表 apollo-build-scripts-master 整个阿波罗环境包 使用一个命令启动整个阿波罗服务环境 创建两个数据库 分别为:apol ...

  3. jsonp 实现跨域例子

    直接上代码: js: <html> <head> <title>JSONP</title> </head> <script src = ...

  4. BZOJ2764 [JLOI2011]基因补全

    Description 在 生物课中我们学过,碱基组成了DNA(脱氧核糖核酸),他们分别可以用大写字母A,C,T,G表示,其中A总与T配对,C总与G配对.两个碱基序列能相互 匹配,当且仅当它们等长,并 ...

  5. Avoid nesting too deeply and return early避免嵌套太深应尽早返回

    当某个变量与多个值进行比较的时候 不要用多个if else 判断是否相等 将多个值放在数组里,然后用PHP函数in_array(mixed $needle,array $haystack),检查数组$ ...

  6. CSDN_帖子__WapPc

    CSDN的帖子,Wap版 和 PC版 网址对应关系: 1. 举个例子: 手机版的网址: http://bbs.csdn.net/wap/topics/391891319 PC版的网址: http:// ...

  7. Windods7+Anaconda+Tensorflow安装步骤

    1.下载及安装Anaconda Anaconda是python科学计算的集成.下载Anaconda,下载地址:http://continuum.io/downloads. 由于tensorflow目前 ...

  8. review23

    文件的创建与删除 当使用File类创建一个文件对象后,例如 File file = new File("C:\\myletter", "letter.txt") ...

  9. 【疯了C#】神奇的换肤(一）

    之前看网上有换肤控件IrisSkin2的介绍,感觉很神奇,今天亲自做下试验,C#越来越有趣了,是Labview无法比拟的. 前期准备工作如下:下载后IrisSkin2.dll及匹配的皮肤. 其中ssk ...

  10. 【微信小程序+ES6新特性应用】字符串模板：美元符号$+大括号{}变量的写法

    1.字符串模板简介 ES6新特性中的字符串模板允许使用英文字符抑音符号`(提示:这里我们不能将其理解为单引号)来创建字符串,并且在该字符串中可以包含都[美元符号+大括号]包裹的变量 格式:consol ...