AngularJS快速入门指南16：Bootstrap

时间：2021-08-05 00:22:56

thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table.reference>thead>tr>td, table.reference>tbody>tr>td, table.reference>tfoot>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
div.chapter {
margin: 10px 0px 10px 0px;
padding: 0px;
width: auto;
overflow: hidden;
}
div.chapter div.prev {
width: 50%;
float: left;
text-align: left;
overflow: hidden;
white-space: nowrap;
}
div.chapter div.next {
width: 50%;
float: right;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
-->

　　Bootstrap是一套非常流行的样式表框架，本章用以演示如何在AngularJS中使用它。

Bootstrap

　　为了在AngularJS application中使用Bootstrap，你需要将下面这行代码加入到页面的head部分（或者去Bootstrap官网下载包然后引用到页面上）：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

　　查看Bootstrap中文官网以了解更多有关http://www.bootcss.com/

　　下面是一个完整的HTML示例，并附有AngularJS指令和Bootstrap类的说明。

HTML代码

<!DOCTYPE html>

<html>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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>&nbsp;&nbsp;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指令解释

AngularJS指令 描述
<body ng-app 将<body>元素定义为AngularJS application的根元素。
<body ng-controller 在<body>元素中指定一个控制器。
<tr ng-repeat 对users对象的每一个子项都创建一个<tr>元素。
<button ng-click 当<button>元素被点击时，调用editUser()函数。
<h3 ng-show 当edit = true时显示<h3>元素。
<h3 ng-hide 当edit = true时隐藏<h3>元素。
<input ng-model 将<input>标签绑定到application。
<button ng-disabled 当出现错误或者incomplete = true时禁用<button>标签。

Bootstrap类解释

元素 Bootstrap类 定义
<div> container 定义内容的容器。
<table> table 定义一个表格。
<table> table-striped 定义一个带有striped样式的表格，即奇数行和偶数行的背景色不同。
<button> btn 定义一个按钮。
<button> btn-success 定义一个带有success样式的按钮。
<span> glyphicon 定义一个glyph样式的图标。
<span> glyphicon-pencil 定义一个pencil样式的图标。
<span> glyphicon-user 定义一个user样式的图标。
<span> glyphicon-save 定义一个save样式的图标。
<form> form-horizontal 定义一个horizontal样式的表单。
<div> form-group 定义一组控件。
<label> control-label 定义一个label控件。
<label> col-sm-2 定义一个具有两列的span。
<div> col-sm-10 定义一个具有10列的span。

JavaScript代码

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 模型变量（用户first name）。
$scope.lName 模型变量（用户last name）。
$scope.passw1 模型变量（用户password 1）。
$scope.passw2 模型变量（用户password 2）。
$scope.users 模型变量（用户对象的数组）。
$scope.edit 当点击按钮创建一个用户时将该变量设置为true。
$scope.error 当passw1不等于passw2时值为true。
$scope.incomplete 当field中的内容为空时（即length = 0）值为true。
$scope.editUser 修改模型数据。
$scope.watch 监视模型数据（例如判断passw1是否等于passw2）。
$scope.test 进行数据验证，然后设置$scope.error和$scope.incomplete的值。

AngularJS快速入门指南16：Bootstrap的更多相关文章

  1. AngularJS快速入门指南17：Includes

    使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...

  2. AngularJS快速入门指南15：API

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  3. AngularJS快速入门指南01：导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  4. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  5. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  6. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  7. AngularJS快速入门指南14：数据验证

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  8. AngularJS快速入门指南13：表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  9. AngularJS快速入门指南12：模块

    AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...

随机推荐

  1. Asp&period;Net Core--自定义基于策略的授权

    翻译如下: 在封面下,角色授权和声明授权使用需求,需求的处理程序和预配置的策略. 这些构建块允许您在代码中表示授权评估,从而允许更丰富,可重用和容易测试的授权结构. 授权策略由一个或多个需求组成,并在 ...

  2. 用Laravel&plus;Grunt&plus;Bower管理你的应用

    来源:http://yansu.org/2014/03/10/grunt-bower-and-laravel.html 为什么这么选择? 如今开源盛行,从后端的各个类库,到如今前端的jQuery插件, ...

  3. pspo

    一.项目计划总结: 周活动总结表 姓名:               日期:3.12.2015 日期       任务 听课 编写程序 阅读课本 准备考试 日总计 周日 周一 周二 周三 10:00- ...

  4. 教你50招提升ASP&period;NET性能（二十二）：利用&period;NET 4&period;5异步结构

    (40)Take advantage of .NET 4.5 async constructs 招数40: 利用.NET 4.5异步结构 With the arrival of .NET 4.5, w ...

  5. HDU 4442 Physical Examination&lpar;贪心&rpar;

    HDU 4442 Physical Examination(贪心) 题目链接http://acm.split.hdu.edu.cn/showproblem.php?pid=4442 Descripti ...

  6. baidu&period;com跳转www&period;baidu&period;com

    打开git bash,输入 curl baidu.com,收到返回 <html> <meta http-equiv="refresh" content=&quot ...

  7. 多线程-interrupt&lpar;&rpar;，isInterrupted&lpar;&rpar;，interrupted&lpar;&rpar;（转）

    Content 背景 中断 相关方法 阻塞方法 不可中断的阻塞方法 处理不支持中断的线程中断的常用方法 处理InterruptedException 待决中断 实例1 实例2 参考资料 Top 背景 ...

  8. torchvision&period;datasets&period;ImageFolder数据加载

    ImageFolder 一个通用的数据加载器,数据集中的数据以以下方式组织 root/dog/xxx.png root/dog/xxy.png root/dog/xxz.png root/cat/12 ...

  9. WIN10 64位系统 如何安装&period;NET Framwork3&period;5

    把SXS文件夹复制到C盘根目录,然后以管理员身份运行CMD,大概2分钟能完成,然后这个SXS文件夹就可以删了        

  10. Activiti Modeler初探实践

    以下内容对实践activiti很有用,不过我用的不是github下载的源码包编译出来的war包,不知道什么原因我打出来的包会有点问题.不过这不重要,换个地方下载来源就行,下载网址: http://dl ...

相关文章