Skip to content

Commit 8da3740

Browse files
author
Sebastian Hammerl
committed
Added headers and dividers to objects list
1 parent c868086 commit 8da3740

File tree

5 files changed

+102
-12
lines changed

5 files changed

+102
-12
lines changed

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ Add "ui.multiselect" to your modules list. Then you can use it like follows:
2525
options="c for c in selectOptions" // use ... c.name for c in ... for objects
2626
data-multiple="true" // true for multi-select mode
2727
data-compare-by="id" // set key to compare objects, otherwise is has to be equal to options
28+
data-header-key="header" // Key which marks headers in the objects list
29+
data-divider-key="divider" // Key which marks dividers in the objects list
2830
scroll-after-rows="5" // Show scroll bar after 5 rows
2931
filter-after-rows="5 // Show filter input after 5 rows
3032
max-width="100" // The maximum width of the multiselect dropdown button
@@ -48,7 +50,7 @@ $ karma start
4850

4951
### License
5052

51-
Copyright (c) 2015 Sebastian Hammerl, Getslash GmbH
53+
Copyright (c) 2017 Sebastian Hammerl, Getslash GmbH
5254

5355
Copyright (c) 2014 Amitava Saha
5456

‎angular-bootstrap-multiselect.js

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ angular.module("ui.multiselect", ["multiselect.tpl.html"])
3333
var parsedResult = optionParser.parse(exp);
3434
var isMultiple = attrs.multiple ? true : false;
3535
var compareByKey = attrs.compareBy;
36+
var headerKey = attrs.headerKey;
37+
var dividerKey = attrs.dividerKey;
3638
var scrollAfterRows = attrs.scrollAfterRows;
3739
var tabindex = attrs.tabindex;
3840
var maxWidth = attrs.maxWidth;
@@ -121,7 +123,9 @@ angular.module("ui.multiselect", ["multiselect.tpl.html"])
121123
scope.items.push({
122124
label : parsedResult.viewMapper(local),
123125
model : model[i],
124-
checked: false
126+
checked: false,
127+
header : model[i][headerKey],
128+
divider : model[i][dividerKey]
125129
});
126130
}
127131
}
@@ -220,7 +224,7 @@ angular.module("ui.multiselect", ["multiselect.tpl.html"])
220224
item.checked = false;
221225
if(compareByKey === undefined && angular.equals(item.model, newVal)) {
222226
item.checked = true;
223-
} else if(compareByKey !== undefined && newVal !== null && angular.equals(item.model[compareByKey], newVal[compareByKey])) {
227+
} else if(compareByKey !== undefined && newVal !== null && item.model[compareByKey] !== undefined && angular.equals(item.model[compareByKey], newVal[compareByKey])) {
224228
item.checked = true;
225229
}
226230
});
@@ -230,7 +234,7 @@ angular.module("ui.multiselect", ["multiselect.tpl.html"])
230234
angular.forEach(newVal, function(i) {
231235
if(compareByKey === undefined && angular.equals(item.model, i)) {
232236
item.checked = true;
233-
} else if(compareByKey !== undefined && angular.equals(item.model[compareByKey], i[compareByKey])) {
237+
} else if(compareByKey !== undefined && item.model[compareByKey] !== undefined && angular.equals(item.model[compareByKey], i[compareByKey])) {
234238
item.checked = true;
235239
}
236240
});
@@ -322,9 +326,11 @@ angular.module("multiselect.tpl.html", []).run(["$templateCache", function($temp
322326
" </button>\n" +
323327
" <ul class=\"dropdown-menu\" style=\"margin-bottom:30px;padding-left:5px;padding-right:5px;\" ng-style=\"ulStyle\">\n" +
324328
" <input ng-show=\"items.length > filterAfterRows\" ng-model=\"filter\" style=\"padding: 0px 3px;margin-right: 15px; margin-bottom: 4px;\" placeholder=\"Type to filter options\">" +
325-
" <li data-stopPropagation=\"true\" ng-repeat=\"i in items | filter:filter\">\n" +
326-
" <a ng-click=\"select($event, i)\" style=\"padding:3px 10px;cursor:pointer;\">\n" +
327-
" <i class=\"glyphicon\" ng-class=\"{'glyphicon-ok': i.checked, 'empty': !i.checked}\"></i> {{i.label}}</a>\n" +
329+
" <li data-stopPropagation=\"true\" ng-repeat=\"i in items | filter:filter\" ng-class=\"{'dropdown-header': i.header, 'divider': i.divider}\">\n" +
330+
" <a ng-if=\"!i.header && !i.divider\" ng-click=\"select($event, i)\" style=\"padding:3px 10px;cursor:pointer;\">\n" +
331+
" <i class=\"glyphicon\" ng-class=\"{'glyphicon-ok': i.checked, 'empty': !i.checked}\"></i> {{i.label}}" +
332+
" </a>\n" +
333+
" <span ng-if=\"i.header\">{{i.label}}</span>" +
328334
" </li>\n" +
329335
" </ul>\n" +
330336
"</div>");

‎app.js

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ angular.module("angular-bootstrap-multiselect-test", ["ui.multiselect"]).control
1515
bla: "blubb"
1616
},
1717
"",
18-
""
18+
"",
19+
{},
20+
{}
1921
];
2022
$scope.multiselectModel = [
2123
[],
@@ -86,6 +88,33 @@ angular.module("angular-bootstrap-multiselect-test", ["ui.multiselect"]).control
8688
"ThisIsATestWithVeryLongEntries22222",
8789
"ThisIsATestWithVeryLongEntries33333",
8890
"ThisIsATestWithVeryLongEntries44444",
89-
"ThisIsATestWithVeryLongEntries55555",
91+
"ThisIsATestWithVeryLongEntries55555"
92+
];
93+
$scope.selectOptionsObjectsHeader = [
94+
{
95+
name: "Fruits",
96+
header: true
97+
},
98+
{
99+
id: 1,
100+
name: "Bananas"
101+
},
102+
{
103+
id: 2,
104+
name: "Peaches"
105+
}
106+
];
107+
$scope.selectOptionsObjectsDivider = [
108+
{
109+
id: 1,
110+
name: "Bananas"
111+
},
112+
{
113+
divider: true
114+
},
115+
{
116+
id: 2,
117+
name: "Peaches"
118+
}
90119
];
91120
});

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-bootstrap-multiselect",
3-
"version": "0.4.1",
3+
"version": "0.5.0",
44
"authors": [
55
"Sebastian Hammerl, Getslash GmbH",
66
"Amitava Saha"

‎index.html

Lines changed: 55 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,30 @@ <h3>Multi select pre-selection compare by id</h3>
176176
&gt;&lt;/multiselect&gt</pre>
177177
<br>
178178

179+
<h3>Multi select headers</h3>
180+
<multiselect ng-model="singleselectModel[7]" options="c.name for c in selectOptionsObjectsHeader" data-header-key="header"></multiselect>
181+
<br><br>
182+
Model: {{singleselectModel[7]}}
183+
<br><br>
184+
<pre>&lt;multiselect
185+
ng-model="multiselectModel[7]"
186+
options="c.name for c in selectOptionsObjectsHeader"
187+
data-header-key="header"
188+
&gt;&lt;/multiselect&gt</pre>
189+
<br>
190+
191+
<h3>Multi select dividers</h3>
192+
<multiselect ng-model="singleselectModel[8]" options="c.name for c in selectOptionsObjectsDivider" data-divider-key="divider"></multiselect>
193+
<br><br>
194+
Model: {{singleselectModel[8]}}
195+
<br><br>
196+
<pre>&lt;multiselect
197+
ng-model="multiselectModel[7]"
198+
options="c.name for c in selectOptionsObjectsDivider"
199+
data-divider-key="divider"
200+
&gt;&lt;/multiselect&gt</pre>
201+
<br>
202+
179203
<h3>app.js:</h3>
180204
<pre>
181205
angular.module("angular-bootstrap-multiselect-test", ["ui.multiselect"]).controller("index", function($scope) {
@@ -193,7 +217,9 @@ <h3>app.js:</h3>
193217
bla: "blubb"
194218
},
195219
"",
196-
""
220+
"",
221+
{},
222+
{}
197223
];
198224
$scope.multiselectModel = [
199225
[],
@@ -264,8 +290,35 @@ <h3>app.js:</h3>
264290
"ThisIsATestWithVeryLongEntries22222",
265291
"ThisIsATestWithVeryLongEntries33333",
266292
"ThisIsATestWithVeryLongEntries44444",
267-
"ThisIsATestWithVeryLongEntries55555",
293+
"ThisIsATestWithVeryLongEntries55555"
268294
];
295+
$scope.selectOptionsObjectsHeader = [
296+
{
297+
name: "Fruits",
298+
header: true
299+
},
300+
{
301+
id: 1,
302+
name: "Bananas"
303+
},
304+
{
305+
id: 2,
306+
name: "Peaches"
307+
}
308+
];
309+
$scope.selectOptionsObjectsDivider = [
310+
{
311+
id: 1,
312+
name: "Bananas"
313+
},
314+
{
315+
divider: true
316+
},
317+
{
318+
id: 2,
319+
name: "Peaches"
320+
}
321+
];
269322
});
270323
</pre>
271324

0 commit comments

Comments
 (0)