-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample-7-spicy.html
58 lines (46 loc) · 1.82 KB
/
example-7-spicy.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example7</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js">
</script>
<script
src="spicy.js">
</script>
<link rel="stylesheet" type="text/css" href="/mm.css" />
</head>
<body ng-app="spicyApp1">
<div ng-controller="SpicyController">
<button ng-click="chiliSpicy()">Chili</button>
<button ng-click="jalapenoSpicy()">Jalapeño</button>
<p>The food is {{spice}} spicy!</p>
</div>
<div ng-repeat="n in [42, 42, 43, 43] track by $index">
{{n}}
</div>
<div ng-app id="ng-app">
<hr />
<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed">Click here to <strong>Toggle (show/hide)</strong> description</a>
<div ng-show="collapsed">I am description for the above title, which was collapsed by default</div>
<hr />
<a href="#" ng-model="expandme" ng-click="expandme=true">Click here to <strong>SHOW</strong> description</a>
<div ng-show="expandme">I am description for the above title, which was collapsed by default</div>
<hr />
<a href="#" ng-model="collapseme" ng-click="collapseme=true">Click here to <strong>HIDE</strong> description</a>
<div ng-hide="collapseme">I am description for the above title, which was collapsed by default</div>
<hr />
<label for="chklabl">
<input type="checkbox" ng-model="checked" name="chklabl" id="chklabl"> Check this checkbox to show/hide this example is from AngularJS API Reference
</label>
<br/>
Show: <span ng-show="checked">I show up when your checkbox is checked.</span>
<br/>
Hide: <span ng-hide="checked">I hide when your checkbox is checked.</span>
<hr />
</div>
<a href="show-hide-section.html" target=_new>Show Hide Section</a>
<a href="gem.html" target=_new>Gem</a>
</body>
</html>