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 ...
随机推荐
- ReactJS实用技巧（2）：从新人大坑——表单组件来看State
不太清楚有多少初学React的同学和博主当时一样,在看完React的生命周期.数据流之后觉得已经上手了,甩开文档啪啪啪的开始敲了起来.结果...居然被一个input标签给教做人了. 故事是这样的:首先 ...
- Hadoop框架
1.Hadoop的整体框架 Hadoop由HDFS.MapReduce.HBase.Hive和ZooKeeper等成员组成,其中最基础最重要元素为底层用于存储集群中所有存储节点文件的文件系统HDFS( ...
- unity中camera摄像头控制详解
目录 1. 缘起 2. 开发 2.1. 建立项目 2.2. 旋转 2.2.1. 四元数 2.3. 移动 2.3.1. 向量操作 2.4. 镜头拉伸 2.5. 复位 2.6. 优化 1 缘起 我们的产品 ...
- 现已告别五险一金？迎来社保商保时代保险INSURAUNCE
现已告别五险一金?迎来社保商保时代保险INSURAUNCE 经济工作会议提出,中国要降低社会保险费,研究精简归并"五险一金",可以说是为社保变革指明了大方向.未来,生育保险将与基本 ...
- Cloud Native Weekly | Kubernetes 1.13发布
云原生一周精选 1——Kubernetes 1.13发布 2——Kubernetes首次出现重大安全漏洞 3——Docker和微软公司推出云原生应用的部署规范 4——谷歌推出beta版本的Cloud ...
- Mac下搭建lamp
Mac下搭建lamp Mac 自带了Apache,并默认支持PHP环境,只需要配置Apache和PHP即可使用.需要单独安装mysql服务端. Apache 基础配置 Apache支持PHP配置 Ap ...
- PAT甲题题解-1125. Chain the Ropes (25)-贪心水题
贪心水题,每次取最短的两个绳子合并,长度缩减成一半 #include <iostream> #include <cstdio> #include <algorithm&g ...
- 《Linux内核》课本读书笔记 第一章、第二章
- NBPL团队总结
我们团队钱多多记账软件项目从2017年12月号开始,历时两个周.这两个周,我们从头学起,学到了很多新的知识,对一些概念有了认知,关于团队协作,关于团队建设,关于Android开发.回顾前两周,我们一致 ...
- CodeM Qualifying Match Q2
问题描述: 组委会正在为美团点评CodeM大赛的决赛设计新赛制. 比赛有 n 个人参加(其中 n 为2的幂),每个参赛者根据资格赛和预赛.复赛的成绩,会有不同的积分. 比赛采取锦标赛赛制,分轮次进行, ...