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
|
<div class="row">
<div class="col-sm-12">
<h3 class="pageHeading">Demo > Single Selection Mode</h3>
<p>
By default, single selection mode will only show reset button and the search field.
In the example below, all helper elements are hidden - it now looks like a normal drop down menu.
</p>
<p>
Go to <a href="#/configs-options">configs & options</a> section and find "helper-elements" to learn how to hide the helper elements.
</p>
<br />
<div
isteven-multi-select
input-model="modernBrowsers"
output-model="outputBrowsers"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
selection-mode="single"
helper-elements=""
>
</div>
<p> </p>
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a data-target="#view" aria-controls="home" role="tab" data-toggle="tab">View</a></li>
<li role="presentation"><a data-target="#controller" aria-controls="profile" role="tab" data-toggle="tab">Controller</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="view">
<p>Define your directive:</p>
<pre><code><div
isteven-multi-select
input-model="modernBrowsers"
output-model="outputBrowsers"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
...
selection-mode="single"
>
</div></code></pre>
</div>
<div role="tabpanel" class="tab-pane" id="controller">
<p>Define your input-model:</p>
<div class="fauxCode hljs xml">
$scope.modernBrowsers = [
<table>
<tr class="hljs-tag" ng-repeat="row in modernBrowsers" >
<td> </td>
<td>{</td>
<td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
<td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
<td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
<td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
<td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
</tr>
</table>
];
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h5>Output model</h5>
<p>
Look at the <code>output-model</code> below to see the values getting updated
as you select / deselect an item in the directive. Icons in the objects are actually full HTML <code>img</code> tag, shortened for simplicity.
</p>
<div class="fauxCode hljs xml">
$scope.outputBrowsers = [
<table>
<tr class="hljs-tag" ng-repeat="row in outputBrowsers" >
<td> </td>
<td>{</td>
<td><span class="hljs-attribute">icon</span>: <span class="hljs-value">"{{removeHost(row.icon)}}"</span>,</td>
<td><span class="hljs-attribute">name</span>: <span class="hljs-value">"{{row.name}}"</span>,</td>
<td><span class="hljs-attribute">maker</span>: <span class="hljs-value">"{{row.maker}}"</span>,</td>
<td><span class="hljs-attribute">ticked</span>: <span class="hljs-value">{{row.ticked}}</span></td>
<td>}<span ng-if="$index < modernWebBrowsers.length - 1">,</span></td>
</tr>
</table>
];
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
|
