-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (118 loc) · 4.88 KB
/
index.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html id="ng-app" ng-app="index">
<head>
<title>john-oc projects</title>
<link href="css/default.css" rel="stylesheet" />
<script src="lib/angular.min.1.2.7.js"></script>
<script src="lib/ui-bootstrap-tpls-0.9.0.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="acute.select/acute.select.js"></script>
<link href="acute.select/acute.select.css" rel="stylesheet" />
<script src="index.js"></script>
<!--[if lte IE 8]>
<script>
document.createElement('ac-select');
document.createElement('tabset');
document.createElement('tab');
</script>
<![endif]-->
</head>
<body ng-controller="MainCtrl">
<div class="demo">
<br />
<h2>Live Demo - acute-select for AngularJS</h2>
<p>By John O'Connor.</p>
<div class="intro"><b>acute-select</b> is a dropdown select component for <a href="http://angularjs.org/">AngularJS</a>, with no dependencies other than Angular itself.
It has a range of configuration options and a syntax akin to Angular's standard select directive.
</div>
<p><a href="https://github.com/john-oc/acute-select">Source code on github.</a></p>
<hr />
<h4>Basic select with filtering</h4>
<ac-select ac-model="selectedColour" ac-options="c.name for c in colours"
ac-change="colourChanged(value)"></ac-select>
<p>Colour selected: {{selectedColour.name}}</p>
<tabset>
<tab heading="Markup">
<pre>
<ac-select ac-model="selectedColour" ac-options="c.name for c in colours"
ac-change="colourChanged(value)"></ac-select></pre>
</tab>
<tab heading="JavaScript">
<pre>
$scope.selectedColour = $scope.colours[2]; // red.
$scope.colourChanged = function (value) {
var colourName = value ? value.name : "none";
$scope.message = "ac-change event fired for colour. New colour: " + colourName;
$scope.$digest();
};
$scope.colours = [
{ name: 'black', id: 0 },
{ name: 'white', id: 1 },
{ name: 'red', id: 2 },
...</pre>
</tab>
</tabset>
<hr />
<h4>Loading data when the dropdown opens</h4>
<select class="ac-select stateList" ac-model="selectedState" ac-options="s.name for s in getAllStates()"
ac-settings="{ loadOnOpen: true, minWidth: '300px' }" ac-change="stateSelected(value)"></select>
<p>State selected: {{stateInfo}}</p>
<tabset>
<tab heading="Markup">
<pre>
<select class="ac-select stateList" ac-model="selectedState" ac-options="s.name for s in <b>getAllStates()</b>"
ac-settings="{ loadOnOpen: true, minWidth: '300px' }" ac-change="stateSelected(value)"></select></pre>
<p>Here, the parentheses on "getAllStates()" tell the ac-select directive to call a function to get the data for the dropdown.<br />
Note that the ac-change function must be specified with a parameter called "value".
</p>
</tab>
<tab heading="JavaScript">
<pre>
$scope.getAllStates = function (callback) {
callback($scope.allStates);
};
$scope.stateSelected = function (state) {
$scope.stateInfo = state.name + " (" + state.id + ")";
}
$scope.allStates = [
{ "name": "Alabama", "id": "AL" },
{ "name": "Alaska", "id": "AK" },
...</pre>
<p>ac-select passes a callback function to accept the data, so it can be read asynchronously if required.</p>
</tab>
</tabset>
<hr />
<h4>Combo Mode</h4>
<p>I.e. a combined text box and dropdown.</p>
<select class="ac-select stateList" ac-model="selectedState" ac-options="s.name for s in getAllStates()"
ac-settings="{ comboMode: true, loadOnOpen: true, minWidth: '300px' }" ac-change="stateSelected(value)"></select>
<p>State selected: {{stateInfo}}</p>
<tabset>
<tab heading="Markup">
<pre>
<select class="ac-select stateList" ac-model="selectedState" ac-options="s.name for s in getAllStates()"
ac-settings="{ <b>comboMode: true</b>, loadOnOpen: true, minWidth: '300px' }" ac-change="stateSelected(value)"></select></pre>
<p>Combo mode is enabled by including "comboMode: true" in the ac-settings attribute.</p>
</tab>
<tab heading="JavaScript">
<pre>
$scope.getAllStates = function (callback) {
callback($scope.allStates);
};
$scope.stateSelected = function (state) {
$scope.stateInfo = state.name + " (" + state.id + ")";
}
$scope.allStates = [
{ "name": "Alabama", "id": "AL" },
{ "name": "Alaska", "id": "AK" },
...</pre>
<p>ac-select passes a callback function to accept the data, so it can be read asynchronously if required.</p>
</tab>
</tabset>
<hr />
<p>See <a href="https://github.com/john-oc/acute-select">github README</a> for a full list of settings.</p>
<div class="signature">John O'Connor</div>
<hr />
</div>
</body>
</html>