1.要使用Bootstrap框架，必须在<head>中加入链接：

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

2.国内站点建议使用：

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

3.实例演示：

<!DOCTYPE html>

<html>

<link rel="stylesheet" href="http://apps.bding.com/libs/bootstrap/3.3.4/css/bootstrap/.min.js">

<script  src=http://apps.bding.com/libs/angular.js/1.4.6/angular.min.js></script>

<body ng-app="myApp" ng-controller="userCtrl">  //为<body>元素定义一个控制器

<div class="container">  //内容容器

<h3>User</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">         //　　循环users对象组，每个user对象放在<tr>元素中

　　　　<td>

　　　　　　<button class="btn" ng-click="editUser(user.id)">    //当点击<button>元素时调用函数editUser()

　　　　　　<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>Ctreate New User           //用户图标

</button>

<hr>

<h3 ng-show="edit">Create New User:</h3>   //如果edit=“true”显示<h3>元素

<h3 ng-hide="edit">Edit User:</h3>                //如果edit="true"隐藏<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">   //为应用程序绑定<input>元素

　　</div>

</div>

<div class="form-group">

　　<label class="col-sm-2 control-label">Last Name:</label>     //跨越2列

　　<div class="col-sm-10">               //跨越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">    //如果发生错误或者ncomplete=true禁用<button>元素

　　<span class="glyphicon glyphicon-save"></span>Save Changes

</button>

</div>

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

</body>

</html>

4.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;

　　}

};

});

Angular JS 学习之Bootstrap的更多相关文章

  1. 适合我胃口的angular.js学习资料

    断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...

  2. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  3. Angular.js学习笔记 （二）

    用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.cr ...

  4. angular.js学习的第一天

    第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...

  5. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  6. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  7. Angular JS学习之表达式

    1.Angular JS使用表达式把数据绑定到HTML: 2.Angular JS表达式写在双大括号中:{{expression}} **Angular JS表达式把数据绑定到HTML,这与ng-bi ...

  8. Angular JS 学习之简介

    1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...

  9. Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

随机推荐

  1. supervisord安装使用简记

    What is supervisor Supervisor is a client/server system that allows its users to monitor and control ...

  2. nginx中的超时设置

    nginx使用proxy模块时,默认的读取超时时间是60s. 1. send_timeout syntax: send_timeout the time default: send_timeout 6 ...

  3. ecshop 支付

    支付分成两部分 1.订单信息 2.支付日志ID 3.生成支付代码 一次性支付完成 // 支付信息 include_once('includes/lib_payment.php'); $order['l ...

  4. 在Application中集成Microsoft Translator服务之获取访问令牌

    我在这里画了一张图来展示业务逻辑 在我们调用microsoft translator server之前需要获得令牌,而且这个令牌的有效期为10分钟.下表列出所需的参数和对于的说明 参数 描述 clie ...

  5. 【08-23】redis学习笔记

    今天开始重拾linux,使用的是ubuntu发行版,主要是想在linux上学习redis,作为服务器端软件天然选择linux啊. 第一次使用ubuntu配置超级管理员密码: su passwd roo ...

  6. 大熊君学习html5系列之------XHR2（XMLHttpRequest Level 2）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  7. javascript parseJSON

    解析json: 前台和后台做ajax交互,后台返回的json字符串,我之前都是通过eval来解析,后来慢慢的知道eval这货是魔鬼,eval要尽量避免,是出于安全考虑,因为eval过于强大,他可以把s ...

  8. Ubuntu操作系统下软件的卸载

    1.查找安装文件列表 $ dpkg --list 2. 将列表名录复制粘贴到文本文件中 3. 搜索关键词,找到准确的名称 4. 在终端中执行命令: $ sudo apt-get --purge rem ...

  9. 清北学堂模拟赛day7 错排问题

    /* 考虑一下已经放回m本书的情况,已经有书的格子不要管他,考虑没有书的格子,不考虑错排有(n-m)!种,在逐步考虑有放回原来位置的情况,已经放出去和已经被占好的格子,不用考虑,剩下全都考虑,设t=x ...

  10. Linux下查看操作系统信息、内存情况及cpu信息：cpu个数、核心数、线程数

    1.查看物理CPU的个数 [root@MysqlCluster01 ~]# cat /proc/cpuinfo |grep "physical id"|sort |uniq|wc ...