Angular JS 学习之Bootstrap

时间：2022-09-09 15:53:17

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&period;js学习资料

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

  2. python &comma; angular js 学习记录【1】

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

  3. Angular&period;js学习笔记 （二）

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

  4. angular&period;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=&quot ...

  9. Angular JS 学习笔记&lpar;自定义服务：factory，Promise 模式异步请求查询&colon;&dollar;http&comma;过滤器用法filter，指令&colon;directive&rpar;

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

随机推荐

  1. mybatis There is no getter for property named &&num;39&semi;xxxx

    mybatis There is no getter for property named 'xxxx 360反馈意见截图16230322799670.png http://blog.sina.com ...

  2. 【Tarjan】&plus;【SPFA】APIO2009 Atm

    一.算法介绍 tarjan——求解有向图强连通分量.这个算法在本人的一篇blog中有介绍,这里就不赘述了.贴上介绍tarjan的的blog链接:http://www.cnblogs.com/Maki- ...

  3. Android Studio JNI&sol;NDK 编程简介（一）

    首先说一下概念及相关的东西: JNI : JNI是Java Native Interface的缩写,它提供了若干的API实现了Java和其他语言的通信(主要是C&C++).从Java1.1开始 ...

  4. 关于SQL查询效率，100w数据，查询只要1秒

    1.关于SQL查询效率,100w数据,查询只要1秒,与您分享:机器情况p4: 2.4内存: 1 Gos: windows 2003数据库: ms sql server 2000目的: 查询性能测试,比 ...

  5. return、break、continue的区别

    一.定义 return:语句用于终止当前方法运行,返回到调用该方法的语句处.如有返回值,则在return后面提供相应的返回值. break:其主要用于循环语句和switch语句,其作用均是强行终止语句 ...

  6. Codeforces Gym 100269E Energy Tycoon 贪心

    题目链接:http://codeforces.com/gym/100269/attachments 题意: 有长度为n个格子,你有两种操作,1是放一个长度为1的东西上去,2是放一个长度为2的东西上去 ...

  7. 阿里云在RSAC 2018上宣布 将在西雅图建立安全实验室

    日前,2018年度的RSA Conference全球信息安全大会在美国加州旧金山市召开.作为全球三大云计算服务商之一,阿里云携3款全新安全产品亮相,并宣布今年将在西雅图设立全新的安全实验室,整合全球安 ...

  8. JAVA发红包案例

    模拟拼手气红包* 对于指定总金额以及红包个数,可以生成不同金额的红包,*,每个红包金额随机生成. * 分析这个题目:* 1.首先需要一个分发红包的方法.输入的参数是 总金额 以及 红包个数.* 按照这 ...

  9. 简单的PHP单例模式

    class MySQL { private static $instance; // 阻止外部实例化 private function __construct() { # code... } // 阻 ...

  10. fn&colon;replace&lpar;&rpar;函数

    fn:replace()函数将字符串中所有指定的子串用另外的字符串替换. 语法 fn:replace()函数的语法如下: ${fn:replace(<原始字符串>, <被替换的字符串 ...

相关文章