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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
<div class="row">
<div class="col-sm-12">
<h3 class="pageHeading">Demo > Dynamic Update</h3>
<p>
The directive listens to changes on their input <code>$scope</code> variable.
This is how you programatically update the directive - by changing the input model - and it will
refresh accordingly.
</p>
<br />
<div
isteven-multi-select
input-model="dynamicData"
output-model="outputBrowsers"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
>
</div>
<h5>Update input-model</h5>
<p>
Click one of the buttons below to load different data into it.
</p>
<p>
<button type="button" class="btn btn-success btn-xs" ng-click="switchSource( 'modernBrowsers' )" >Load modern browsers</button>
<button type="button" class="btn btn-primary btn-xs" ng-click="switchSource( 'oldBrowsers' )" >Load old browsers</button>
</p>
<h5>Update singular data</h5>
<p>
You can also update a single item. Operations like these are totally valid:
<ul>
<li><code>$scope.modernBrowsers[ 1 ].ticked = false</code>, or</li>
<li><code>$scope.modernBrowsers[ 1 ].name = 'Hola!'</code></li>
</ul>
For example, click this button below to change the name of the first chosen browser, into 'Hello World'.
</p>
<p>
<button type="button" class="btn btn-warning btn-xs" ng-click="dynamicData[ 0 ].name = 'Hello World'" >Update singular data</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="dynamicData"
output-model="outputBrowsers"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
>
</div>
...
<!-- The buttons to do data operation -->
<button type="button" class="btn btn-success btn-xs" ng-click="switchSource( 'modernBrowsers' )" >Load modern browsers</button>
<button type="button" class="btn btn-primary btn-xs" ng-click="switchSource( 'oldBrowsers' )" >Load old browsers</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="dynamicData[ 0 ].name = 'Hello World!'" >Update singular data</button></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 dynamicData" >
<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 < modernBrowsers.length - 1">,</span></td>
</tr>
</table>
];
</div>
<div class="fauxCode hljs xml">
$scope.oldBrowsers = [
<table>
<tr class="hljs-tag" ng-repeat="row in oldBrowsers" >
<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 < oldBrowsers.length - 1">,</span></td>
</tr>
</table>
];
</div>
<p>
Some extra codes here; <code>$scope.swithcSource()</code> is a function where we switch
the <code>$scope.dynamicData</code> content with modern or old browsers.
</p>
<pre><code>// This will be our input model
$scope.dynamicData = [];
// Just a function to switch the model on button click.
$scope.switchSource = function( data ) {
$scope.dynamicData = angular.copy( $scope[ data ] );
}
// Initially we'll use the modern browsers
$scope.switchSource( 'modernBrowsers' );</code></pre>
</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>
<h5>Learn more</h5>
</p>
Open the <code>/docs/js/controllers/demo-dynamic-update.js</code>, as well as this view
<code>docs/views/demo-dynamic-update.htm</code>to learn the code directly.
</p>
</div>
</div>
<script>
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
|
