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. python2-gst0.10制作静态包的补丁

    gst制作成了静态库,而python2的gst有多个动态库引用gst的库 因此,想了一个办法将python2所需要的gst打包成一个单独的共享库 办法就是,将python2_gst所有的.so先制作成 ...

  2. Python Day7

    概述 面向对象高级语法部分 静态方法.类方法.属性方法 类的特殊方法 反射 静态方法 通过@staticmethod装饰器即可把其装饰的方法变为一个静态方法,什么是静态方法呢?其实不难理解,普通的方法 ...

  3. AXIS 调用 webservice服务时传递 服务器验证需要的用户名密码

    System.setProperty("javax.net.ssl.trustStore", T.class.getResource(".").getPath( ...

  4. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

  5. 通过ipv6访问 g o o g l e

    Google.Youtube.Facebook等均支持IPv6访问,IPv4网络的用户大部分都无法访问,比如Gmail,Google Docs等等各种相关服务.而该类网站大部分均已接入IPv6网络,因 ...

  6. Daily Build

    Daily Build 是一件非常有意义的事情,也是敏捷开发中关于 “持续集成” 的一个实践.Daily Build 对于开发来说有如下好处: 保证了每次 check in 的代码可用,不会造成整个工 ...

  7. R语言-处理异常值或报错的三个示例

    博客总目录:http://www.cnblogs.com/weibaar/p/4507801.html Tuesday, March 31, 2015 之前用rvest帮人写了一个定期抓取amazon ...

  8. 【piu~】制作一只变形小鸡~

    在http://codepen.io/pick上看到的,,,具体是谁忘了,反正我只截了最萌的一段,作者越改越不萌ಥ_ಥ 谷哥哥随便一搜就有很多好玩的,度娘就...( ￣ ▽￣)o╭╯☆#╰ _─﹏─) ...

  9. idea导入maven项目，web browser远程单步调试

    问题:之前用idea14.1.3导入maven项目后,maven的dependencies不能自动解决依赖,到处都是红色的红线,看着就受不了.虽然不影响命令行编译,但是看着实在是不爽.总结下面几小步: ...

  10. pathinfo()、dirname()、basename()获得文件的路径，名称等信息说明

    在PHP中,若想通过函数获得一个文件的路径.名称,或者是扩展名等,是非常容易的一件事.可以使用dirname().basename().pathinfo()等多种途径获得相应的信息. 假设现在有一个图 ...