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

Commit beb61bd

Browse files
committed
Documentation for select by group:
When items are grouped by property you can also specify an array of groups that you can use to select the items by. The extra-settings property selectByGroups accepts an array of the values of the groups that you want to be selectable. The naming will use the groupByTextProvider function to give them an actual label.
1 parent ab767ea commit beb61bd

File tree

2 files changed

+90
-0
lines changed

2 files changed

+90
-0
lines changed

pages/javascripts/pages/home/ExampleCtrl.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,29 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop
122122
}
123123
};
124124

125+
$scope.selectByGroupModel = [];
126+
$scope.selectByGroupData = [
127+
{ id: 1, label: "David", gender: 'M' },
128+
{ id: 2, label: "Jhon", gender: 'M' },
129+
{ id: 3, label: "Lisa", gender: 'F' },
130+
{ id: 4, label: "Nicole", gender: 'F' },
131+
{ id: 5, label: "Danny", gender: 'M' },
132+
{ id: 6, label: "Unknown", gender: 'O' }];
133+
134+
$scope.selectByGroupSettings = {
135+
selectByGroups: ['F', 'M'],
136+
groupByTextProvider: function(groupValue) {
137+
switch (groupValue) {
138+
case 'M':
139+
return 'Male';
140+
case 'F':
141+
return 'Female';
142+
case 'O':
143+
return 'Other';
144+
}
145+
}
146+
};
147+
125148
$scope.example13model = [];
126149
$scope.example13data = [
127150
{id: 1, label: "David"},

pages/javascripts/pages/home/home.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -476,6 +476,62 @@ <h3>Code</h3>
476476
</div>
477477
</div>
478478
</uib-accordion-group>
479+
<uib-accordion-group heading="Select Items by Group">
480+
<div class="row">
481+
<div class="col-xs-12">
482+
When items are grouped by property you can also specify an array of groups that you can use to select the items by.
483+
The extra-settings property selectByGroups accepts an array of the values of the groups that you want to be selectable.
484+
The naming will use the groupByTextProvider function to give them an actual label.
485+
</div>
486+
</div>
487+
<div class="row">
488+
<div class="col-xs-12 col-sm-6">
489+
<h3>Demo</h3>
490+
<div class="well">
491+
<div>
492+
<div ng-dropdown-multiselect options="selectByGroupData" selected-model="selectByGroupModel" extra-settings="selectByGroupSettings" group-by="gender"></div>
493+
</div>
494+
</div>
495+
</div>
496+
<div class="col-xs-12 col-sm-6">
497+
<h3>The model:</h3>
498+
<pre>{{selectByGroupModel|json}}</pre>
499+
</div>
500+
</div>
501+
<div class="row">
502+
<div class="col-md-12">
503+
<h3>Code</h3>
504+
<div hljs>
505+
// HTML
506+
<div ng-dropdown-multiselect options="selectByGroupData" selected-model="selectByGroupModel" extra-settings="selectByGroupSettings" group-by="gender"></div>
507+
508+
// JavaScript
509+
$scope.selectByGroupModel = [];
510+
$scope.selectByGroupData = [
511+
{ id: 1, label: "David", gender: 'M' },
512+
{ id: 2, label: "Jhon", gender: 'M' },
513+
{ id: 3, label: "Lisa", gender: 'F' },
514+
{ id: 4, label: "Nicole", gender: 'F' },
515+
{ id: 5, label: "Danny", gender: 'M' },
516+
{ id: 6, label: "Unknown", gender: 'O' }];
517+
518+
$scope.selectByGroupSettings = {
519+
selectByGroups: ['F', 'M'],
520+
groupByTextProvider: function(groupValue) {
521+
switch (groupValue) {
522+
case 'M':
523+
return 'Male';
524+
case 'F':
525+
return 'Female';
526+
case 'O':
527+
return 'Other';
528+
}
529+
}
530+
};
531+
</div>
532+
</div>
533+
</div>
534+
</uib-accordion-group>
479535
<uib-accordion-group heading="Custom ID property">
480536
<div class="row">
481537
<div class="col-xs-12">
@@ -1121,6 +1177,12 @@ <h2>Settings</h2>
11211177
<td> { {getPropertyForObject(option, settings.displayProp)} }</td>
11221178
<td>Can be used to modify the appearance of an option in the list, each option is accessible as option.</td>
11231179
</tr>
1180+
<tr>
1181+
<td>selectByGroups</td>
1182+
<td>Array</td>
1183+
<td>undefined</td>
1184+
<td>Values of the groupby property that you want to be selectable as group</td>
1185+
</tr>
11241186
</tbody>
11251187
</table>
11261188
<h2>Events</h2>
@@ -1227,6 +1289,11 @@ <h2>Translation Texts</h2>
12271289
<td>checked</td>
12281290
<td>The suffix for the button that used when using "dynamicText".</td>
12291291
</tr>
1292+
<tr>
1293+
<td>selectGroup</td>
1294+
<td>Select All:</td>
1295+
<td>The prefix of the group selection.</td>
1296+
</tr>
12301297
</tbody>
12311298
</table>
12321299
</div>

0 commit comments

Comments
 (0)