-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex4.html
More file actions
83 lines (83 loc) · 9.04 KB
/
index4.html
File metadata and controls
83 lines (83 loc) · 9.04 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form UI Demo(4)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-sanitize.js"></script>
<script src="js/ui-bootstrap-custom-0.4.0.min.js"></script>
<script src="js/ui-bootstrap-custom-tpls-0.4.0.min.js"></script>
<script src="js/index4.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/base_responsive.css" rel="stylesheet">
<link href="css/rainbow.css" rel="stylesheet">
<style type="text/css">input[type="checkbox"].demo {margin: 0;} .lbl-list {display: inline-block; margin: 0;}</style>
</head>
<body>
<ul class="menu-links">
<li><a href="/">Home</a></li>
<li><a href="index.html">Demo</a></li>
<li><a href="index2.html">Demo(2)</a></li>
<li><a href="index3.html">Demo(3)</a></li>
<li><a href="index4.html">Demo(4)</a></li>
</ul>
<p></p>
<div class="form-signin" data-ng-app="customDirectiveApp">
<div class="" data-ng-controller="CheckboxGroupCtrl">
<h3 class="form-signin-heading">Group of Checkbox: AngularJS Custom Directive Demo</h3>
<p>Ever needed a group of checkbox? To be able to let users to check <i>more than one checkbox</i> and <i>less or equal to n checkboxes</i> in AngularJS?
Well, now you can. Check out the demo below:</p>
<div class="blank-space"></div>
<ul>
<li ng-repeat="entry in list1">{{data[entry].text}}</li>
</ul>
<checkbox-group model="data" mlist="list1" xclass="demo" max={{sliderValue}}></checkbox-group>
<p>Max: {{sliderValue}} <input type="range" ng-model="sliderValue" name="maxSlider" min="1" max="6"></p>
</div>
<div class="blank-space"></div>
<div ng-controller="AlertCtrl">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">
<span ng-bind-html="alert.msg"></span>
</alert>
</div>
<div class="blank-space"></div>
<tabset>
<tab heading="Markup">
<pre class="rainbow"> <span class="support tag"><span class="support tag"><div</span> <span class="support attribute">data-ng-controller</span><span class="support attr-value"><span class="string quote">=</span><span class="string quote">"</span><span class="string value">CheckboxGroupCtrl</span><span class="string quote">"</span></span><span class="string quote">></span></span>
<span class="support tag"><span class="support tag"><span class="string quote"><</span>h3</span><span class="string quote">></span></span>AngularJS Custom Directive Demo<span class="support tag"><span class="support tag"><span class="string quote"></</span>h3</span><span class="string quote">></span></span>
<span class="support tag"><span class="support tag"><span class="string quote"><</span>ul</span><span class="string quote">></span></span>
<span class="support tag"><span class="support tag"><span class="string quote"><</span>li</span> <span class="support attribute">ng-repeat</span><span class="support attr-value"><span class="string quote">=</span><span class="string quote">"</span><span class="string value">entry in list1</span><span class="string quote">"</span></span><span class="string quote">></span></span>{{data[entry].text}}<span class="support tag"><span class="support tag"><span class="string quote"></</span>li</span><span class="string quote">></span></span>
<span class="support tag"><span class="support tag"><span class="string quote"></</span>ul</span><span class="string quote">></span></span>
<span class="support tag"><span class="support tag"><span class="string quote"><</span>checkbox-group</span> <span class="support attribute">model</span><span class="support attr-value"><span class="string quote">=</span><span class="string quote">"</span><span class="string value">data</span><span class="string quote">"</span></span> <span class="support attribute">mlist</span><span class="support attr-value"><span class="string quote">=</span><span class="string quote">"</span><span class="string value">list1</span><span class="string quote">"</span></span> <span class="support attribute">xclass</span><span class="support attr-value"><span class="string quote">=</span><span class="string quote">"</span><span class="string value">demo</span><span class="string quote">"</span></span> <span class="support attribute">max</span><span class="support attr-value"><span class="string quote">=</span><span class="string value">3</span><span class="string quote">></span></span></span><span class="support tag"><span class="support tag"><span class="string quote"></</span>checkbox-group</span><span class="string quote">></span></span>
<span class="support tag"><span class="support tag"><span class="string quote"></</span>div</span><span class="string quote">></span></span>
</pre>
</tab>
<tab heading="JavaScript">
<pre class="rainbow">CheckboxGroupCtrl <span class="support operator">=</span> <span class="support keyword">function</span><span class="string quote">(</span>$scope<span class="string quote">)</span> <span class="string quote">{</span>
$scope<span class="string quote">.</span>data <span class="support operator">=</span> <span class="string quote">[</span>
<span class="string quote">{</span>ID<span class="string quote">:</span><span class="support string">'1'</span><span class="string quote">,</span> text<span class="string quote">:</span><span class="support string">'Apple'</span><span class="string quote">,</span> select<span class="string quote">:</span><span class="support boolean">false</span><span class="string quote">}</span><span class="string quote">,</span>
<span class="string quote">{</span>ID<span class="string quote">:</span><span class="support string">'2'</span><span class="string quote">,</span> text<span class="string quote">:</span><span class="support string">'Orange'</span><span class="string quote">,</span> select<span class="string quote">:</span><span class="support boolean">false</span><span class="string quote">}</span><span class="string quote">,</span>
<span class="string quote">{</span>ID<span class="string quote">:</span><span class="support string">'3'</span><span class="string quote">,</span> text<span class="string quote">:</span><span class="support string">'Banana'</span><span class="string quote">,</span> select<span class="string quote">:</span><span class="support boolean">false</span><span class="string quote">}</span><span class="string quote">,</span>
<span class="string quote">{</span>ID<span class="string quote">:</span><span class="support string">'4'</span><span class="string quote">,</span> text<span class="string quote">:</span><span class="support string">'Pineapple'</span><span class="string quote">,</span> select<span class="string quote">:</span><span class="support boolean">false</span><span class="string quote">}</span><span class="string quote">,</span>
<span class="string quote">{</span>ID<span class="string quote">:</span><span class="support string">'5'</span><span class="string quote">,</span> text<span class="string quote">:</span><span class="support string">'Watermelon'</span><span class="string quote">,</span> select<span class="string quote">:</span><span class="support boolean">false</span><span class="string quote">}</span><span class="string quote">,</span>
<span class="string quote">{</span>ID<span class="string quote">:</span><span class="support string">'6'</span><span class="string quote">,</span> text<span class="string quote">:</span><span class="support string">'Avocado'</span><span class="string quote">,</span> select<span class="string quote">:</span><span class="support boolean">false</span><span class="string quote">}</span><span class="string quote">,</span>
<span class="string quote">{</span>ID<span class="string quote">:</span><span class="support string">'7'</span><span class="string quote">,</span> text<span class="string quote">:</span><span class="support string">'Kiwi'</span><span class="string quote">,</span> select<span class="string quote">:</span><span class="support boolean">false</span><span class="string quote">}</span><span class="string quote">]</span><span class="string quote">;</span>
$scope<span class="string quote">.</span>list1 <span class="support operator">=</span> <span class="string quote">[</span><span class="string quote">]</span><span class="string quote">;</span>
<span class="string quote">}</span>
</pre>
</tab>
</tabset>
<p><a href="https://github.com/jhkueh/demo-formUI-esc/blob/master/js/index4.js">View JS source</a></p>
<div class="blank-space"></div>
</div>
<footer>
<div class="container footer">
<hr>
<p class="pull-right"><a href="https://github.com/jhkueh">github.com/jhkueh</a></p>
<p class="pull-left">Powered by <a href="http://twitter.github.io/bootstrap/index.html">Bootstrap</a>, <a href="http://angularjs.org/">AngularJS</a> & <a href="http://angular-ui.github.io/bootstrap">UI-Bootstrap</a>.</p>
</div>
</footer>
</body>
</html>