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
|
<div class="row">
<div class="col-sm-12">
<h3 class="pageHeading">Getting Started</h3>
<h5>Include the required files</h5>
<p>First things first:</p>
<pre><code><!DOCTYPE html>
<html ng-app="myApp" id="myApp">
<head>
...
<link rel="stylesheet" href="isteven-multi-select.css">
...
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="isteven-multi-select.js"></script>
...
<head></code></pre>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h5>Initiate your AngularJs app & load the module</h5>
<p>
If you learn AngularJs from AngularJs' website, you should be familiar with this <code>app.js</code>
file, in which you initiate your AngularJs app. So let's put our directive module there and load it, such as:
</p>
<pre><code>var myApp = angular.module( "myApp", [ "isteven-multi-select" ]);</code></pre>
<h5>In your controller</h5>
<p>
In your controller, define a <code>$scope</code> variable as the input-model. This is our "ng-model",
so to speak.
</p>
<p>
<span class="label label-primary">Note</span> The input-model has to be a one-dimensional (flat), array of objects.
</p>
<pre><code>$scope.modernBrowsers = [
{ icon: "<img src=[..]/opera.png.. />", name: "Opera", maker: "(Opera Software)", ticked: true },
{ icon: "<img src=[..]/internet_explorer.png.. />", name: "Internet Explorer", maker: "(Microsoft)", ticked: false },
{ icon: "<img src=[..]/firefox-icon.png.. />", name: "Firefox", maker: "(Mozilla Foundation)", ticked: true },
{ icon: "<img src=[..]/safari_browser.png.. />", name: "Safari", maker: "(Apple)", ticked: false },
{ icon: "<img src=[..]/chrome.png.. />", name: "Chrome", maker: "(Google)", ticked: true }
]; </code></pre>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h5>In your view</h5>
<p>Let's now define the directive with a minimum required configuration options.</p>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<p>As an attribute:</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"
>
</div></code></pre>
</div>
<div class="col-sm-7">
<p>... or as an element, but be careful with browser compatibility.</p>
<pre><code><isteven-multi-select
input-model="modernBrowsers"
output-model="outputBrowsers"
button-label="icon name"
item-label="icon name maker"
tick-property="ticked"
>
</isteven-multi-select></code></pre>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>By now you should now have dropdown button like the one you saw earlier on the front page.</p>
<h5>Getting the selected items</h5>
<p>
This should be obvious, but I got this question a lot, so:
<pre><code>angular.forEach( $scope.outputBrowsers, function( value, key ) {
/* do your stuff here */
});</code></pre>
</p>
<p>That's it! Go to the <a href="#/configs-options">Configs & Options</a> section to read more</p>
</div>
</div>
<script>
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
|
