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
|
<div class="row">
<div class="col-sm-12">
<h3 class="pageHeading">Demo > Disabling / Enabling</h3>
<p>
You can disable the directive, as well as each selection item in it.
As you might have guessed, you can do this programmatically, on the fly.
When the directive is disabled, You can still toggle the dropdown button
and see the items, but some of the directive's button will be hidden.
</p>
<br />
<div
isteven-multi-select
input-model="modernBrowsers"
output-model="outputBrowsers"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
helper-elements="all"
disable-property="disabled"
is-disabled="disableDir"
>
</div>
<h5>Disable / enable the directive</h5>
<p>
Click one of the buttons below to disable or enable the directive.
</p>
<p>
<button type="button" class="btn btn-danger btn-xs" ng-click="disableDir = true" >Disable</button>
<button type="button" class="btn btn-success btn-xs" ng-click="disableDir = false" >Enable</button>
</p>
<h5>Disable / enable singular item</h5>
<p>
You need to use <code>disable-property</code> attribute to define which object is disabled / enabled.
Click one of the buttons below to disable or enable the first browser.
</p>
<p>
<button type="button" class="btn btn-danger btn-xs" ng-click="modernBrowsers[ 0 ].disabled = true" >Disable the first browser</button>
<button type="button" class="btn btn-success btn-xs" ng-click="modernBrowsers[ 0 ].disabled = false" >Enable the first browser</button>
</p>
<br />
<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"
...
disable-property="disabled"
is-disabled="disableDir"
>
</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>
|
