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 ...
随机推荐
- docker之网络管理
一.安装网桥管理工具 [root@node03 web]# yum install bridge-utils -y 二.docker网络的4种模式 host模式,使用--net=host指定. con ...
- Unity游戏AI记录（2d横板为例）
using System.Collections;using System.Collections.Generic;using UnityEngine; public class GeneralPeo ...
- 绕WAF&安全狗新姿势
俗话说只要思路宽,绕狗绕的欢.前段时间我有尝试着用以下的方法绕狗,效果还不错.不过这方法呢也许这段时间可以绕过,过段时间可能就失效了,大家还是要多去尝试找到更多的方法. 举例-->整型注入 绕过 ...
- Redmine 安装指南
第一种方式 (一键安装): 准备工作: 1.最小化安装CentOS7 2.更新YUM源 3.更新系统关闭防火墙 yum -y update systemctl stop firewalld syste ...
- Jenkins报表 代码 指标分析
Jenkins报表 这表现在前面的章节中,也有可用最简单的一种是适用于 JUnit 测试报告的许多报表插件. 在生成后动作进行任何工作,你可以定义要创建的报告. 该构建已经完成,测试结果选项将可进一步 ...
- Win10环境配置Bitcoin Core节点
区块链是当下比较火热的技术,我也来蹭下热度,研究一把Bitcoin Core的技术. 入门篇 一.Bitcoin Core安装 1.下载 一般有2种安装方式:源码编译安装 和 下载现成的安装包安装 源 ...
- Selenium--数据驱动(python)
前言: 什么是数据驱动? 从它的本意来解释,就是数据的改变从而驱动自动化测试的执行,最终引起测试结果的改变.说人话,其实就是参数化. 本次介绍2种文件驱动:ini文件和yaml文件 一.ini文件 1 ...
- Redis学习笔记之入门基础知识——简介
非关系型数据库,存储的数据类型:字符串(STRING).列表(LIST).集合(SET).散列表(HASH).有序集合(ZSET) 持久化:时间点转储(point-in-time-dump)(快照). ...
- Linux内核分析第一周总结
冯诺依曼体系结构 储存程序计算机工作模型 硬件 程序员 CPU当作for循环: IP: 16位计算机:IP 32位计算机:eIP 64位计算机:rIP X86汇编基础 X86的CPU寄存器 X86的C ...
- 使用maven的插件进行maven项目的打包
1 maven项目打包的插件有3种 maven-jar-plugin maven-assembly-plugin maven-shade-plugin 2 maven-jar-plugin 现在要新增 ...