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 ...
随机推荐
- 安装loadrunner11出现Microsoft Visual c++2005 sp1安装失败
本文转至别处,网上大神多
- 开发认为不是bug，你该如何处理？
这是软件测试员面试时经常被问到的问题.看了很多答案,个人觉得作为有工作经验的测试人员回答时不能完全照搬标准答案,技术面试官想听的当然不止如此.毕竟这种情况在实际工作中也常常出现,具体问题要具体分析,你 ...
- Bitmap 位图 Java实现
一.结构思想 以 bit 作为存储单位进行布尔值存取的数据结构. 表现为:给定第i位,该bit为1则表示true,为0则表示false. 二.使用场景及优点 适用于对布尔或0.1值进行(大量)存取的场 ...
- Hugepage介绍以及实践
在Linux 64位系统里面,默认内存是以4K的页面(Page)来管理的,当系统有非常多的内存的时候,管理这些内存的消耗就比较大;而HugePage使用2M大小的页面来减小管理开销. Hugepage ...
- deepin 下ｍysql编码问题utf8的解决
deepin 下mysql编码问题utf8的解决 参考链接 http://www.ha97.com/5359.html 与之不同的地方在第二歩 二.最简单的完美修改方法,修改mysql的my.cnf文 ...
- ElasticSearch 2 (17) - 深入搜索系列之部分匹配
ElasticSearch 2 (17) - 深入搜索系列之部分匹配 摘要 到目前为止,我们介绍的所有查询都是基于完整术语的,为了匹配,最小的单元为单个术语,我们只能查找反向索引中存在的术语. 但是, ...
- sysbench的安装与简单使用
1. 下载sysbench的文件 https://codeload.github.com/akopytov/sysbench/zip/1.0.15 2. 放进linux机器以及进行解压缩 unzip ...
- [转帖]SAP MES生产执行系统解决方案
一.SAP MES概述: SAP公司成立于1972年,总部位于德国,是全球最大的企业管理和协同化商务解决方案供应商.全球第三大独立软件供应商.目前,在全球有120多个国家的超过86,000多家用户正在 ...
- 【转】mybatis如何防止sql注入
sql注入大家都不陌生,是一种常见的攻击方式,攻击者在界面的表单信息或url上输入一些奇怪的sql片段,例如“or ‘1’=’1’”这样的语句,有可能入侵参数校验不足的应用程序.所以在我们的应用中需要 ...
- laravel 登录后跳转原来浏览的页面
方法 1.修改一下文件/vendor/laravel/framework/src/Illuminate/Foundation/Auth/RedirectsUsers.php 修改内容如下: 没有的加入 ...