AngularJS 启程二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body ng-app="uniqApp">
<div ng-controller="firstCtr">
<p>{{123}}</p>
<p>{{param}}</p>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('uniqApp',[])
.controller('firstCtr',['$scope',function(a){
a.param='abc';
}])
</script></body>
</html>
angular 第一个完整小例子
<!DOCTYPE html>
<html>
<head></head>
<body ng-app="uniqApp">
<div ng-controller="firstCtrl">
<p>{{123}}</p>
<p>{{param}}</p>
</div>
<div ng-controller="secondCtrl">
<p>{{param}}</p>
</div> <script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('uniqApp',[])
.controller('firstCtrl',['$scope',function($scope){
$scope.param='abc';
}])
.controller('secondCtrl',['$scope',function(foo){
foo.param='bar';
}]);
</script>
</body>
</html>
例子二
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title> </head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}]);
</script>
</body> </html>
例子三
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title> </head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div> <div ng-controller="calculatorMan">
<p><h2>计算总价（手动）</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<button ng-click="getTotal()" style="display:block">计算</button>
<p>{{totalPrice}}</p>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}])
.controller('calculatorMan',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.totalPrice=20;
$scope.getTotal=function($scope){
this.totalPrice = this.count*this.price;
}
}]);;
</script>
</body> </html>
例子四
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title> </head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价(自动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div> <div ng-controller="calculatorMan">
<p><h2>计算总价(手动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<button ng-click="getTotal()" style="display:block">计算</button>
<p>{{totalPrice}}</p>
</div>
<div ng-controller="repeatCtrl">
<ul>
<li ng-repeat="person in persons">
{{person.userName+'-------'+person.age}}
</li>
</ul>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}])
.controller('calculatorMan',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.totalPrice=20;
$scope.getTotal=function($scope){
this.totalPrice = this.count*this.price;
}
}])
.controller('repeatCtrl',['$scope',function(repeatScope){
repeatScope.persons=[{userName: 'kobe',age : 39},
{userName: 'kobe2',age : 39},
{userName: 'kobe3',age : 39},
{userName: 'kobe4',age : 39},
{userName: 'kobe5',age : 39},
{userName: 'kobe6',age : 39},
{userName: 'kobe7',age : 39}
]
}]);
</script>
</body> </html>
例子四加入遍历
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title> </head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价(自动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div> <div ng-controller="calculatorMan">
<p><h2>计算总价(手动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<button ng-click="getTotal()" style="display:block">计算</button>
<p>{{totalPrice}}</p>
</div>
<div ng-controller="repeatCtrl">
<ul>
<li ng-repeat="person in persons">
{{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}}
</li>
</ul>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}])
.controller('calculatorMan',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.totalPrice=20;
$scope.getTotal=function($scope){
this.totalPrice = this.count*this.price;
}
}])
.controller('repeatCtrl',['$scope',function(repeatScope){
repeatScope.persons=[{userName: 'kobe',age : 39},
{userName: 'kobe2',age : 39},
{userName: 'kobe3',age : 39},
{userName: 'kobe4',age : 39},
{userName: 'kobe5',age : 39},
{userName: 'kobe6',age : 39},
{userName: 'kobe7',age : 39}
]
}]);
</script>
</body> </html>
例子五看看其他index,even,odd作用
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title> </head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价(自动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div> <div ng-controller="calculatorMan">
<p><h2>计算总价(手动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<button ng-click="getTotal()" style="display:block">计算</button>
<p>{{totalPrice}}</p>
</div>
<div ng-controller="repeatCtrl">
<ul>
<li ng-repeat="person in persons">
{{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}}
</li>
</ul>
</div>
<div ng-controller="toggleCtrl">
<p ng-show="isTrue" ng-bind="param"></p>
<p ng-hide="isTrue" ng-bind="param2"></p>
<button ng-click="switchToggle()">切换按钮</button>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}])
.controller('calculatorMan',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.totalPrice=20;
$scope.getTotal=function($scope){
this.totalPrice = this.count*this.price;
}
}])
.controller('repeatCtrl',['$scope',function(repeatScope){
repeatScope.persons=[{userName: 'kobe',age : 39},
{userName: 'kobe2',age : 39},
{userName: 'kobe3',age : 39},
{userName: 'kobe4',age : 39},
{userName: 'kobe5',age : 39},
{userName: 'kobe6',age : 39},
{userName: 'kobe7',age : 39}
]
}])
.controller('toggleCtrl',['$scope',function(toggleScope){
toggleScope.isTrue=true;
toggleScope.param='这是真的';
toggleScope.param2='这是假的';
toggleScope.switchToggle=function(){
toggleScope.isTrue=!toggleScope.isTrue;
}
}])
;
</script>
</body> </html>
指令大集合，ng-bind,ng-show,ng-hide
<!DOCTYPE html>
<html lang="en">
<head>
<title>计算器示例</title>
<style>
.oddClass{
background:red;
}
.evenClass{
background:green;
}
</style>
</head>
<body ng-app="topApp">
<div ng-controller="calculator">
<p><h2>计算总价(自动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<p>{{getTotal()}}</p>
</div> <div ng-controller="calculatorMan">
<p><h2>计算总价(手动)</h2></p>
<p><label>数量</label><input type="number" ng-model="count"></p>
<p><label>单价</label><input type="number" ng-model="price"></p>
<button ng-click="getTotal()" style="display:block">计算</button>
<p>{{totalPrice}}</p>
</div>
<div ng-controller="repeatCtrl">
<ul>
<li ng-repeat="person in persons">
{{$middle}}---{{$last}}---{{$first}}---{{$index}}---{{person.userName+'-------'+person.age}}---{{$odd}}----{{$even}}
</li>
</ul>
</div>
<div ng-controller="toggleCtrl">
<p ng-show="isTrue" ng-bind="param"></p>
<p ng-hide="isTrue" ng-bind="param2"></p>
<button ng-click="switchToggle()">切换按钮</button>
<div style="width:180px;height:200px;" ng-mouseenter="enter()" ng-mouseleave="leave()" ng-style="eventStyle"></div>
<ul>
<li ng-class="{oddClass:$odd,evenClass:$even}" ng-repeat="person in persons" ng-bind="{{person.userName+'---------'+person.age}}">
</li>
</ul>
</div>
<script type="text/javascript" src="./angular.js"></script>
<script type="text/javascript">
angular.module('topApp',[])
.controller('calculator',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.getTotal=function($scope){
return this.count*this.price;
}
}])
.controller('calculatorMan',['$scope',function($scope){
$scope.count=2;
$scope.price=10;
$scope.totalPrice=20;
$scope.getTotal=function($scope){
this.totalPrice = this.count*this.price;
}
}])
.controller('repeatCtrl',['$scope',function(repeatScope){
repeatScope.persons=[{userName: 'kobe',age : 39},
{userName: 'kobe2',age : 39},
{userName: 'kobe3',age : 39},
{userName: 'kobe4',age : 39},
{userName: 'kobe5',age : 39},
{userName: 'kobe6',age : 39},
{userName: 'kobe7',age : 39}
]
}])
.controller('toggleCtrl',['$scope',function(toggleScope){
toggleScope.isTrue=true;
toggleScope.param='这是真的';
toggleScope.param2='这是假的';
toggleScope.switchToggle=function(){
toggleScope.isTrue=!toggleScope.isTrue;
}
toggleScope.persons=[{userName:'tom',age:40},
{userName:'tom2',age:40},
{userName:'tom3',age:40},
{userName:'tom4',age:40},
{userName:'tom5',age:40}
];
toggleScope.eventStyle={background:'red'};
toggleScope.enter=function(){
toggleScope.eventStyle={background:'green'}
}
toggleScope.leave=function(){
toggleScope.eventStyle={background:'red'}
}
}])
;
</script>
</body> </html>
ng-class,ng-style,ng-mouseenter,ng-mouseleave
AngularJS 启程二的更多相关文章
- AngularJS进阶(二十七)实现二维码信息的集成思路
AngularJS实现二维码信息的集成思路 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,与君共勉! 注:点击此处进行知识充电 ...
- angularjs（二）模板终常用的指令的使用方法
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- angularjs指令(二)
最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...
- angularJS 服务二
$http服务 一 介绍 AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据.我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏 ...
- 媲美jQuery的JS框架----AngularJS（二）
前言 对于AngularJS什么,小编在这就不多做介绍了.大家可以看小编的上一篇博客. 言归正传,小编在上一篇博客中介绍了AngularJS中的指令.表达式还有非常实用的三种服务.接下来,带大家看一看 ...
- AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储
AngularJS项目开发技巧之localStorage存储 注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...
- angularJS（二）：作用域$scope、控制器、过滤器
app.controller创建控制器 一.作用域 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. ...
- AngularJs之二
今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl"> < ...
- angularjs笔记(二)
AngularJS API 4.AngularJS过滤器 使用一个管道符(|)添加到表达式和指令中 例1.格式化字母转为大写 <!DOCTYPE html> <html> &l ...
随机推荐
- B1022. D进制的A+B
除基取余法 #include<bits/stdc++.h> using namespace std; stack<int> s; int main(){ long long a ...
- fabric-sdk-container v1.0-beta 新增支持多服务节点
HyperLedger/Fabric SDK Docker Image 该项目在github上的地址是:https://github.com/aberic/fabric-sdk-container ( ...
- mysql select 字段别名是否可以用在 select中或者where中
select column1+10 as c1,c1+10 as c2 from table1;想实现上面的效果,结果在mysql里面报错了,提示找不到c1这个列; -- 不同的 数据库不一样 一般不 ...
- linux读书笔记（5章）
linux读书笔记(5章) 标签(空格分隔): 20135328陈都 第五章 系统调用 5.1 与内核通信 系统调用 让应用程序受限的访问硬件设备 提供创建新进程并与已有进程通信的机制 提供申请操作系 ...
- Sprint report
Sprint report 一.需求分析:随着在校大学生人数的不断增加,许多高校出现了许多个校区并存的局面,并且校区之间的地理位置跨度非常大,给高校选课带来了很大的不方便,数据处理手工操作,工作量大, ...
- 基于 Java Web 的毕业设计选题管理平台--测试报告与用户手册
一.测试报告 1.兼容性测试 功能 描述 效果 Chrome浏览器 FireFox浏览器 IE浏览器 war 端浏览器 管理员登录 管理员用户登录功能 弹出“登录成功”对话框,进入到毕业设计选题管理平 ...
- 第四次WBS
分解原则 1.将主体目标逐步细化分解,最底层的日常活动可直接分派到个人去完成: 2.每个任务原则上要求分解到不能再细分为止: 3.日常活动要对应到人.时间和资金投入. 二.任务分解的方法 1.采用树状 ...
- NServiceBus官方文档翻译（二）NServiceBus 入门
在这篇教程中我们将学习如何创建一个非常简单的由客户端向服务端发送消息的订单系统.该系统包括三个项目:Client.Server 和 Messages,我们将按照以下步骤来完成这个任务. 创建 Clie ...
- 3.23日PSP
工作 类型 日期 开始时间 结束时间 中断时间 净时间 搭hadoop环境(已终止) 技能 3.23 00:00 00:50 0min 50min 看构建之法 学习 3.23 9:30 10:00 3 ...
- MT【109】线面角最大时为二面角平面角
解答:如图设C到$\alpha$面的距离为$d_1,C_1$到虚线距离为$d_2$ 所求距离$d=d_1+d_2=|AC|sin\theta+|CC_1|cos\theta=4\sqrt{2}sin\ ...