Skip to content
This repository was archived by the owner on Dec 16, 2019. It is now read-only.

Commit d7db62e

Browse files
dotansimhadotansimha
committed
Added code examples
1 parent 6003b9b commit d7db62e

File tree

4 files changed

+160
-6
lines changed

4 files changed

+160
-6
lines changed

‎app.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
'use strict';
22

33
angular.module('exampleApp', [
4-
'ngRoute', 'ngSanitize', 'ngTouch', 'ngAnimate',
5-
'angularjs-dropdown-multiselect'
4+
'ngRoute',
5+
'ngSanitize',
6+
'ngTouch',
7+
'ngAnimate',
8+
'angularjs-dropdown-multiselect',
9+
'hljs'
610
]).
711
config(['$routeProvider', '$locationProvider', '$compileProvider', function($routeProvider, $locationProvider) {
812
$locationProvider.html5Mode(false);

‎bower.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,7 @@
2323
"lodash": "~2.4.1",
2424
"bootstrap": "~3.1.1"
2525
},
26-
"devDependencies": {}
26+
"devDependencies": {
27+
"angular-highlightjs": "~0.2.7"
28+
}
2729
}

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
<script type="text/javascript" src="bower_components/angular-touch/angular-touch.min.js"></script>
1515
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
1616
<script type="text/javascript" src="bower_components/lodash/dist/lodash.min.js"></script>
17+
<script type="text/javascript" src="bower_components/highlightjs/highlight.pack.js"></script>
18+
<script type="text/javascript" src="bower_components/angular-highlightjs/angular-highlightjs.min.js"></script>
1719

1820
<script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>
1921
<!--<script type="text/javascript" src="angularjs-dropdown-multiselect.min.js"></script>-->

‎pages/home/home.html‎

Lines changed: 149 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ <h1 class="title">AngularJS Dropdown Multiselect</h1>
77
multiselect dropdown with Bootstrap</small></h1>
88
</div>
99
<div style="padding-top: 20px; text-align: right" class="col-xs-12 col-sm-4"> <a
10-
href="js-dropdown-multiselect.js" class="btn btn-primary topbtn"><span style="margin-right:10px"
10+
href="angularjs-dropdown-multiselect.js" class="btn btn-primary topbtn"><span style="margin-right:10px"
1111
class="glyphicon glyphicon-save"></span><strong>Download</strong></a><a href="https://github.com/dotansimha/angularjs-dropdown-multiselect" style="margin-left: 15px;" class="btn btn-default topbtn"><strong>View on GitHub</strong></a></div>
1212
</div>
1313
<div class="row">
@@ -20,12 +20,12 @@ <h1 class="title">AngularJS Dropdown Multiselect</h1>
2020
<h2 style="margin-bottom: 0">Basic Usage Example</h2>
2121
</div>
2222
</div>
23-
<div class="row">
23+
<div class="row">
2424
<div class="col-xs-12 col-sm-6">
2525
<h3>Demo</h3>
2626
<div class="well">
2727
<div>
28-
<div ng-dropdown-multiselect options="example1data" selected-model="example1model"></div>
28+
<div ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
2929
</div>
3030
</div>
3131
</div>
@@ -34,6 +34,25 @@ <h3>The model: </h3>
3434
<pre>{{example1model|json}}</pre>
3535
</div>
3636
</div>
37+
<div class="row">
38+
<div class="col-md-12">
39+
<h3>Code</h3>
40+
<div class="well">
41+
<div>
42+
<div hljs>
43+
// HTML
44+
<div ng-dropdown-multiselect="" options="example1data" selected-model="example1model"></div>
45+
46+
// JavaScript
47+
$scope.example1model = [];
48+
$scope.example1data = [
49+
{id: 1, label: "David"},
50+
{id: 2, label: "Jhon"},
51+
{id: 3, label: "Danny"}];</div>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
3756
<div class="row">
3857
<div class="col-xs-12">
3958
<h2 style="margin-bottom: 0">Basic Settings Example</h2>
@@ -56,6 +75,27 @@ <h3>The model: </h3>
5675
<pre>{{example2model|json}}</pre>
5776
</div>
5877
</div>
78+
<div class="row">
79+
<div class="col-md-12">
80+
<h3>Code</h3>
81+
<div class="well">
82+
<div>
83+
<div hljs>
84+
// HTML
85+
<div ng-dropdown-multiselect options="example2data" selected-model="example2model"
86+
extra-settings="example2settings"></div>
87+
88+
// JavaScript
89+
$scope.example2model = [];
90+
$scope.example2data = [
91+
{id: 1, label: "David"},
92+
{id: 2, label: "Jhon"},
93+
{id: 3, label: "Danny"}];
94+
$scope.example2settings = {displayProp: 'id'};</div>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
5999
<div class="row">
60100
<div class="col-xs-12">
61101
<h2 style="margin-bottom: 0">Custom ID property</h2>
@@ -82,6 +122,28 @@ <h3>The model: </h3>
82122
<pre>{{example3model|json}}</pre>
83123
</div>
84124
</div>
125+
<div class="row">
126+
<div class="col-md-12">
127+
<h3>Code</h3>
128+
<div class="well">
129+
<div>
130+
<div hljs>
131+
// HTML
132+
<div ng-dropdown-multiselect options="example3data" selected-model="example3model"
133+
extra-settings="example3settings"></div>
134+
135+
// JavaScript
136+
$scope.example3model = [];
137+
$scope.example3data = [
138+
{id: 1, label: "David"},
139+
{id: 2, label: "Jhon"},
140+
{id: 3, label: "Danny"},
141+
{id: 4, label: "Danny"}];
142+
$scope.example3settings = {displayProp: 'label', idProp: 'label'};</div>
143+
</div>
144+
</div>
145+
</div>
146+
</div>
85147
<div class="row">
86148
<div class="col-xs-12">
87149
<h2 style="margin-bottom: 0">Model Custom Property</h2>
@@ -105,6 +167,27 @@ <h3>The model: </h3>
105167
<pre>{{example4model|json}}</pre>
106168
</div>
107169
</div>
170+
<div class="row">
171+
<div class="col-md-12">
172+
<h3>Code</h3>
173+
<div class="well">
174+
<div>
175+
<div hljs>
176+
// HTML
177+
<div ng-dropdown-multiselect options="example4data" selected-model="example4model"
178+
extra-settings="example4settings"></div>
179+
180+
// JavaScript
181+
$scope.example4model = [];
182+
$scope.example4data = [
183+
{id: 1, label: "David"},
184+
{id: 2, label: "Jhon"},
185+
{id: 3, label: "Danny"}];
186+
$scope.example4settings = {displayProp: 'label', idProp: 'id', externalIdProp: 'myCustomPropertyForTheObject'};</div>
187+
</div>
188+
</div>
189+
</div>
190+
</div>
108191
<div class="row">
109192
<div class="col-xs-12">
110193
<h2 style="margin-bottom: 0">Custom Button Text</h2>
@@ -126,6 +209,27 @@ <h3>The model: </h3>
126209
<pre>{{example5model|json}}</pre>
127210
</div>
128211
</div>
212+
<div class="row">
213+
<div class="col-md-12">
214+
<h3>Code</h3>
215+
<div class="well">
216+
<div>
217+
<div hljs>
218+
// HTML
219+
<div ng-dropdown-multiselect options="example5data" selected-model="example5model"
220+
extra-settings="example5settings"></div>
221+
222+
// JavaScript
223+
$scope.example5model = [];
224+
$scope.example5data = [
225+
{id: 1, label: "David"},
226+
{id: 2, label: "Jhon"},
227+
{id: 3, label: "Danny"}];
228+
$scope.example5settings = {defaultText: 'Select Users'};</div>
229+
</div>
230+
</div>
231+
</div>
232+
</div>
129233
<div class="row">
130234
<div class="col-xs-12">
131235
<h2 style="margin-bottom: 0">Pre-selected values</h2>
@@ -148,6 +252,27 @@ <h3>The model: </h3>
148252
<pre>{{example6model|json}}</pre>
149253
</div>
150254
</div>
255+
<div class="row">
256+
<div class="col-md-12">
257+
<h3>Code</h3>
258+
<div class="well">
259+
<div>
260+
<div hljs>
261+
// HTML
262+
<div ng-dropdown-multiselect options="example6data" selected-model="example6model"
263+
extra-settings="example6settings"></div>
264+
265+
// JavaScript
266+
$scope.example6model = [{id: 1}, {id: 3}];
267+
$scope.example6data = [
268+
{id: 1, label: "David"},
269+
{id: 2, label: "Jhon"},
270+
{id: 3, label: "Danny"}];
271+
$scope.example6settings = {};</div>
272+
</div>
273+
</div>
274+
</div>
275+
</div>
151276
<div class="row">
152277
<div class="col-xs-12">
153278
<h2 style="margin-bottom: 0">Full Object as model</h2>
@@ -172,4 +297,25 @@ <h3>The model: </h3>
172297
<pre>{{example7model|json}}</pre>
173298
</div>
174299
</div>
300+
<div class="row">
301+
<div class="col-md-12">
302+
<h3>Code</h3>
303+
<div class="well">
304+
<div>
305+
<div hljs>
306+
// HTML
307+
<div ng-dropdown-multiselect options="example7data"
308+
selected-model="example7model" extra-settings="example7settings"></div>
309+
310+
// JavaScript
311+
$scope.example7model = [];
312+
$scope.example7data = [
313+
{id: 1, label: "David"},
314+
{id: 2, label: "Jhon"},
315+
{id: 3, label: "Danny"}];
316+
$scope.example7settings = {externalIdProp: ''};</div>
317+
</div>
318+
</div>
319+
</div>
320+
</div>
175321
</div>

0 commit comments

Comments
 (0)