-
Notifications
You must be signed in to change notification settings - Fork 0
/
new1.html
106 lines (84 loc) · 3.69 KB
/
new1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<title>Angular JS</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="myController" >
<h2>Welcome {{helloTo.title}} !</h2>
<span ng-bind="myData.textf()"></span>
<li ng-repeat="item in shoppinglistfunction()">{{item}}</li>
<div ng-click="myData.click($event)">Click here</div>
<div ng-dbl-click="myData.doubleclick()">Click here</div>
<span ng-show="myData.showIt">{{para}}</span>
<span ng-hide="myData.showIt">{{gara}}</span>
<div ng-switch on="myData.switch">
<div ng-switch-when="1">Shown when switch is 1</div>
<div ng-switch-when="2">Shown when switch is 2</div>
<div ng-switch-default>Shown when switch is anything else than 1 and 2</div>
</div>
<ol>
<li ng-repeat-start="(name, value) in myData.myObject">{{name}}</li>
<li ng-repeat-end>{{value}}</li>
</ol>
<ol>
<li ng-repeat="item in myData.items | filter:filterArray">
{{item.text}} : {{$first}}, {{$middle}}, {{$last}}
</li>
</ol>
<ol>
<li ng-repeat="item in myData.items | orderBy:sortField:reverse">
{{item.text}} : {{$first}}, {{$middle}}, {{$last}}
</li>
</ol>
<div>{{myData.items.length}}</div>
<div ng-if="myData.showIt">Show it</div>
<div ng-if="myData.showIt1">Show it again</div>
<div ng-include="myData.showIt2 && 'index.html' || 'students.html'"></div>
</div>
<div ng-controller="myController1" >
<h2>Welcome {{helloTo.title}} !</h2>
</div>
<script>
var module = angular.module("myapp", [])
var controller = module.controller("myController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "Hello Everyone, AngularJS";
$scope.para = "What if you don't have miles and points and you don't even have enough time to earn them. Check out how to buy tickets. Check out how to book cheap tickets.";
$scope.gara = "Climate change and rising sea levels are of great concern to the Maldives, which is only 8 feet above sea level at its highest point. As global warming causes the polar ice caps melt and sea levels to rise, the Maldives' entire existence is in jeopardy. The government has also purchased land in other countries in order to evacuate residents in tough times. ";
$scope.myData = {};
$scope.myData.click = function(event) {
alert("clicked: " + event.clientX + ", " + event.clientY);
}
$scope.myData.mouseenter = function(){
alert ("Mouse entered");
}
$scope.myData.doubleclick = function(){
alert ("Mouse double clicked");
}
$scope.myData.myObject = { var1 : "val1", var2 : "val3", var3 : "val3"};
$scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"}, {text : "four"} ];
$scope.sortField = "text";
$scope.reverse = false;
$scope.filterArray = function(item) {
if(item.text == "one") return false;
return true;
}
$scope.myData.textf = function() { return "A text from a function"; };
$scope.myData.showIt = false;
$scope.shoppinglist =["bread","milk","cheese"];
$scope.shoppinglistfunction = function(){return this.shoppinglist};
$scope.myData.switch = 4;
$scope.myData.showIt = true;
$scope.myData.showIt1 = false;
$scope.myData.showIt2 = false;
} );
var controller = module.controller("myController1", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "Hello Everyone, AngularJS";
} );
</script>
</body>
<link rel="stylesheet" type="text/js" href="angular.js">
</html>