Skip to content

Commit a577644

Browse files
author
lidehua
committed
初夜
0 parents  commit a577644

File tree

87 files changed

+3155
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+3155
-0
lines changed

‎01-购物车实例.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html ng-app>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>购物车实例</title>
6+
</head>
7+
<body>
8+
<div ng-controller = "test">
9+
<p>价格：<input type="text" ng-model="iphone.money"/></p>
10+
<p>个数：<input type="text" ng-model="iphone.num"/></p>
11+
<p>运费：{{iphone.fre|currency:'￥'}}</p>
12+
<p>费用：{{sum()|currency:'￥'}}</p>
13+
<p ng-bind-template="费用：{{iphone.fre|currency:'￥'}}">费用：</p>
14+
</div>
15+
16+
<script type="text/javascript" src="js/angular.min.js" ></script>
17+
<script>
18+
function test($scope){
19+
$scope.iphone={
20+
money:6000,
21+
num:1,
22+
fre:10
23+
};
24+
$scope.sum = function(){
25+
return $scope.iphone.money * $scope.iphone.num + $scope.iphone.fre;
26+
}
27+
//监听单个数据,当数据发生改变时触发 参数 ： 监听的对象、监听的回调
28+
/*$scope.$watch('iphone.money',function(){
29+
console.log(1);
30+
});*/
31+
//监听多个对象，监听整个json对象 ,多加一个参数 第三个参数设置为true，表示深度监听
32+
/*$scope.$watch('iphone',function(){
33+
console.log(2);
34+
},true);*/
35+
$scope.$watch($scope.sum,function(newVal,oldVal){
36+
console.log(oldVal);
37+
console.log(newVal);
38+
$scope.iphone.fre = newVal >=10000?0:10;
39+
});
40+
41+
}
42+
43+
</script>
44+
<script>alert(1)</script>
45+
</body>
46+
</html>

‎02-工具方法.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html ng-app>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>工具方法1</title>
6+
</head>
7+
<body>
8+
<script type="text/javascript" src="js/angular.min.js" ></script>
9+
<script>
10+
//1.angular.bind 改变指针的指向
11+
function test(){
12+
var name = "hello";
13+
console.log(this);
14+
}
15+
//test();
16+
//$.proxy() 可以改变this的指针指向
17+
//angular.bind(document,test)();
18+
19+
//2.angular.copy a赋值给b ,a 赋值给c
20+
var a = {"name":"lili"};
21+
var b = {"age":"20"};
22+
var c = angular.copy(a,b);
23+
//console.log(a);// name
24+
//console.log(b);// name
25+
//console.log(c);// name
26+
//2.angular.extend 继承
27+
var a = {"name":"lili"};
28+
var b = {"age":"20"};
29+
var c = angular.extend(a,b);//a继承了b,在赋值给c
30+
console.log(a);// name
31+
console.log(b);// age
32+
console.log(c);// name age
33+
34+
</script>
35+
</body>
36+
</html>

‎03-工具方法2.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html ng-app>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>工具方法1</title>
6+
</head>
7+
<body>
8+
<script type="text/javascript" src="js/angular.min.js" ></script>
9+
<script>
10+
//angular.isArray 判断是否为数组
11+
var a = [];
12+
var b = {};
13+
//console.log(angular.isArray(a));
14+
//console.log(angular.isArray(b));
15+
//angular.isDate 判断是不是时间对象
16+
var t = new Date();
17+
//console.log(angular.isDate(t));
18+
//console.log(angular.isDate(b));
19+
20+
//angular.isDefined 判断元素是否存在
21+
//console.log(angular.isDefined(b.name));
22+
23+
//angular.isUndefined 判断元素是否不存在
24+
//console.log(angular.isUndefined(b.name));
25+
26+
//angular.isFunction 判断是否是函数
27+
var e = function(){}
28+
//console.log(angular.isFunction(e));
29+
30+
//angular.isNumber 判断是否是数字
31+
var num = 123;
32+
//console.log(angular.isNumber(num));
33+
34+
//angular.isObject 判断是否为对象
35+
//console.log(angular.isObject(a));
36+
//console.log(angular.isObject(b));
37+
//console.log(angular.isObject('aaaaaaaaaaaa'));
38+
//angular.isString 判断是否为字符串
39+
//console.log(angular.isString('aaaaaaaaaaaa'));
40+
41+
//angular.isElement 判断是否为一个元素
42+
43+
console.log(angular.isElement(a));
44+
console.log(angular.isElement(document.body));
45+
</script>
46+
</body>
47+
</html>

‎04-工具方法3.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html ng-app>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>工具方法3</title>
6+
</head>
7+
<body>
8+
<div id="ce">test</div>
9+
<script type="text/javascript" src="js/angular.min.js" ></script>
10+
<script>
11+
//angular.version 判断angular库的版本
12+
//console.log(angular.version);
13+
14+
//angular.equals 判断是否相等
15+
var a = 1;
16+
var b =2;
17+
var c =1;
18+
//console.log(angular.equals(a,b));
19+
//console.log(angular.equals(a,c));
20+
//console.log(angular.equals(NaN,NaN));
21+
22+
23+
//angular.forEach 循环 s使用几率大
24+
var values = ['a','b','c'];
25+
var result = [];
26+
angular.forEach(values,function(value,i){
27+
//console.log(value);
28+
//console.log(i);
29+
});
30+
//将value和i链接到一起
31+
//使用 forEach 第三个参数 ，来接收 回调函数的 计算结果
32+
angular.forEach(values,function(value,i){
33+
this.push(value+i);
34+
},result);
35+
//console.log(result);
36+
37+
//angular.fromJson/toJson 字符串转json/json转字符串
38+
var str = '{"name":"lili","age":"20"}';
39+
var json = angular.fromJson(str);
40+
//console.log(json);
41+
var jsonstr = angular.toJson(json);
42+
//console.log(jsonstr);
43+
//angular.identity/noop 将参数显示出来 /空函数
44+
var str ="hello";
45+
//console.log(angular.identity(str));//初始化的时候使用
46+
//console.log(angular.noop ());
47+
function noop(){}
48+
//angular.lowercase/uppercase 转小写/转大写
49+
//console.log(angular.lowercase ('HELLO'));
50+
//console.log(angular.uppercase ('hello'));
51+
52+
//angular.element 获取元素
53+
//包装了一个不全的jquery库
54+
console.log(angular.element (document.querySelector('#ce')));
55+
56+
57+
//angular.bootstrap 动态初始化两个app时使用 经常使用
58+
59+
60+
//angular.injector 注册器
61+
62+
</script>
63+
</body>
64+
</html>

‎05-工具方法4-bootstrap.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>购物车实例</title>
6+
</head>
7+
<body>
8+
<div ng-controller = "test"><!--ng-app="myApp1"-->
9+
{{name}}
10+
</div>
11+
<div ng-controller = "test2"><!--ng-app="myApp2"-->
12+
{{name}}
13+
</div>
14+
<script type="text/javascript" src="js/angular.min.js" ></script>
15+
<script>
16+
var m1 = angular.module('myApp1',[]);
17+
m1.controller('test',['$scope',function($scope){
18+
$scope.name = 'test111';
19+
}]);
20+
var m2 = angular.module('myApp2',[]);
21+
m2.controller('test2',['$scope',function($scope){
22+
$scope.name = '222222222222222';
23+
}]);
24+
25+
//angular.bootstrap 可以动态的初始化
26+
document.onclick = function(){
27+
var aDiv = document.getElementsByTagName('div');
28+
angular.bootstrap(aDiv[0],['myApp1']);
29+
angular.bootstrap(aDiv[1],['myApp2']);
30+
}
31+
32+
33+
34+
</script>
35+
</body>
36+
</html>

‎06-双向数据绑定实例.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html ng-app>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>双向数据绑定</title>
6+
</head>
7+
<body>
8+
<div ng-controller="test">{{name}}</div>
9+
<script type="text/javascript" src="js/angular.min.js" ></script>
10+
<script>
11+
//$timeout定时器服务
12+
function test($scope,$timeout){
13+
$scope.name = "hello world";
14+
//使用定时器，2秒钟后更改成hi world
15+
/*
16+
setTimeout(function(){
17+
18+
$scope.name = "hi world";
19+
alert($scope.name);
20+
},2000);*/
21+
22+
$timeout(function(){
23+
$scope.name = "hi world";
24+
},2000);
25+
}
26+
</script>
27+
</body>
28+
</html>

‎07-双向数据绑定实例-apply.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html ng-app>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>双向数据绑定</title>
6+
</head>
7+
<body>
8+
<div ng-controller="test">{{name}}</div>
9+
<script type="text/javascript" src="js/angular.min.js" ></script>
10+
<script>
11+
//$timeout定时器服务
12+
function test($scope){
13+
$scope.name = "hello world";
14+
//使用定时器，2秒钟后更改成hi world
15+
16+
setTimeout(function(){
17+
//$apply 作用 ：属于angular的内部服务，可以监听函数内部的m层是否发生变化，如果变化，可以将变化同步到V层
18+
$scope.$apply(function(){
19+
$scope.name = "hi world";
20+
});
21+
},2000);
22+
23+
}
24+
</script>
25+
</body>
26+
</html>

‎08-自定义的过滤器.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html ng-app="myApp">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>自定义的过滤器</title>
6+
</head>
7+
<body>
8+
<div ng-controller="test">{{name}}-{{upstr}}</div>
9+
<script type="text/javascript" src="js/angular.min.js" ></script>
10+
<script>
11+
var m1 = angular.module('myApp',[]);
12+
//自定义的过滤器 将首字母大写，并且截取N个字符
13+
m1.filter('firstUpper',function(){
14+
return function(str,num){
15+
console.log(str+'|||'+num);
16+
return str.charAt(0).toUpperCase() + str.substring(1,num);
17+
18+
}
19+
20+
});
21+
m1.controller('test',['$scope','$filter',function($scope,$filter){
22+
$scope.name = '张三';
23+
$scope.upstr = $filter('firstUpper')('helloworld',3);
24+
25+
}]);
26+
27+
</script>
28+
</body>
29+
</html>

‎09-兄弟节点遍历.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html ng-app="myApp">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>兄弟节点间的遍历</title>
6+
</head>
7+
<body>
8+
<div ng-controller="test">
9+
<div ng-repeat-start="stuV in stu ">{{stuV.name}}</div>
10+
<p>同学的年龄</p>
11+
<p>{{stuV.age}}</p>
12+
<hr ng-repeat-end>
13+
<div>test</div>
14+
</div>
15+
16+
<script type="text/javascript" src="js/angular.min.js" ></script>
17+
<script>
18+
var m1 = angular.module('myApp',[]);
19+
20+
m1.controller('test',['$scope','$filter',function($scope,$filter){
21+
$scope.stu = [
22+
{"name":"lili","age":"20"},
23+
{"name":"dalin","age":"21"},
24+
{"name":"xiaoshan","age":"19"},
25+
];
26+
}]);
27+
28+
</script>
29+
</body>
30+
</html>

‎10-事件指令.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html ng-app="myApp">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>事件指令</title>
6+
</head>
7+
<body>
8+
<div ng-controller="test">
9+
<input type="checkbox" ng-model = "aaa">
10+
<select>
11+
<option>1111111111</option>
12+
<option ng-selected="aaa">22222222222</option>
13+
</select><br />
14+
<input type="text" ng-change="bbb='chunzhen'" ng-model="bbb">{{bbb}}<br>
15+
<input type="text" ng-copy="ccc=true" value="11111111">{{ccc}}<br>
16+
<input type="text" ng-cut="ddd=true" value="22222222">{{ddd}}<br>
17+
<input type="text" ng-paste="eee=true" value="33333333">{{eee}}<br>
18+
</div>
19+
<script type="text/javascript" src="js/angular.min.js" ></script>
20+
<script>
21+
var m1 = angular.module('myApp',[]);
22+
m1.controller('test',['$scope',function($scope){
23+
$scope.bbb = 'aaaaa';
24+
25+
}]);
26+
27+
</script>
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)