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

Commit 0301ad3

Browse files
pkempenaerspkempenaers
committed
Added setting idProperty
closes #336
1 parent f182959 commit 0301ad3

File tree

4 files changed

+112
-30
lines changed

4 files changed

+112
-30
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
Version numbers correspond to `bower.json` version
22

3+
# 2.0.0-beta.9
4+
## Features
5+
- Added setting idProperty, when set comparison will be done by this property instead of by reference
6+
37
# 2.0.0-beta.7
48

59
## Breaking Changes

‎src/app/component/angularjs-dropdown-multiselect.controller.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,18 @@ function contains(collection, target) {
2222
return containsTarget;
2323
}
2424

25+
function getIndexByProperty(collection, objectToFind, property) {
26+
let index = -1;
27+
collection.some((option, ind) => {
28+
if (option[property] === objectToFind[property]) {
29+
index = ind;
30+
return true;
31+
}
32+
return false;
33+
});
34+
return index;
35+
}
36+
2537
export default function dropdownMultiselectController(
2638
$scope,
2739
$element,
@@ -308,10 +320,18 @@ export default function dropdownMultiselectController(
308320
}
309321

310322
function setSelectedItem(option, dontRemove = false, fireSelectionChange) {
311-
const exists = $scope.selectedModel.indexOf(option) !== -1;
323+
let exists;
324+
let indexOfOption;
325+
if (angular.isDefined(settings.idProperty)) {
326+
exists = getIndexByProperty($scope.selectedModel, option, settings.idProperty) !== -1;
327+
indexOfOption = getIndexByProperty($scope.selectedModel, option, settings.idProperty);
328+
} else {
329+
exists = $scope.selectedModel.indexOf(option) !== -1;
330+
indexOfOption = $scope.selectedModel.indexOf(option);
331+
}
312332

313333
if (!dontRemove && exists) {
314-
$scope.selectedModel.splice($scope.selectedModel.indexOf(option), 1);
334+
$scope.selectedModel.splice(indexOfOption, 1);
315335
$scope.externalEvents.onItemDeselect(option);
316336
if ($scope.settings.closeOnDeselect) {
317337
$scope.close();
@@ -344,6 +364,9 @@ export default function dropdownMultiselectController(
344364
}
345365

346366
function isChecked(option) {
367+
if (angular.isDefined(settings.idProperty)) {
368+
return getIndexByProperty($scope.selectedModel, option, settings.idProperty) !== -1;
369+
}
347370
return $scope.selectedModel.indexOf(option) !== -1;
348371
}
349372

‎src/app/main/main.controller.js‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,17 @@ export default class MainController {
1717
) {
1818
'ngInject';
1919

20-
$scope.testing = false;
21-
$scope.testmodel = [];
20+
$scope.testing = true;
21+
$scope.testmodel = [{ id: 1 }];
2222
$scope.testdata = [
23-
'David',
24-
'Jhon',
25-
'Danny',
23+
{ id: 1, label: 'David' },
24+
{ id: 2, label: 'Jhon' },
25+
{ id: 3, label: 'Danny' },
2626
];
2727
$scope.testsettings = {
28-
externalIdProp: '',
2928
selectionLimit: 1,
30-
smartButtonMaxItems: 1,
3129
selectedToTop: true,
32-
template: '{{option}}',
33-
smartButtonTextConverter(skip, option) {
34-
return option;
35-
},
30+
idProperty: 'id',
3631
};
3732
$scope.testevents = {
3833
onSelectionChanged() { // This event is not firing on selection of max limit
@@ -319,5 +314,15 @@ export default class MainController {
319314
];
320315
$scope.transclusionSettings = {
321316
};
317+
318+
$scope.idPropertyModel = [{ id: 1 }];
319+
$scope.idPropertyData = [
320+
{ id: 1, label: 'David' },
321+
{ id: 2, label: 'Jhon' },
322+
{ id: 3, label: 'Danny' },
323+
];
324+
$scope.idPropertySettings = {
325+
idProperty: 'id',
326+
};
322327
}
323328
}

‎src/app/main/main.template.html‎

Lines changed: 67 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1018,6 +1018,46 @@ <h3>Code</h3>
10181018
{ id: 3, label: 'Danny' },
10191019
];
10201020
$scope.transclusionSettings = {
1021+
};
1022+
</div>
1023+
</div>
1024+
</div>
1025+
</div>
1026+
<div uib-accordion-group heading="Compare objects by property instead of by reference">
1027+
<div class="row">
1028+
<div class="col-xs-12">
1029+
When idProperty is set the objects will be compared by that property (that should be unique) instead of by reference.
1030+
</div>
1031+
</div>
1032+
<div class="row">
1033+
<div class="col-xs-12 col-sm-6">
1034+
<h3>Demo</h3>
1035+
<div class="well">
1036+
<div ng-dropdown-multiselect="" options="idPropertyData" selected-model="idPropertyModel" extra-settings="idPropertySettings">
1037+
</div>
1038+
</div>
1039+
</div>
1040+
<div class="col-xs-12 col-sm-6">
1041+
<h3>The model:</h3>
1042+
<pre>{{idPropertyModel|json}}</pre>
1043+
</div>
1044+
</div>
1045+
<div class="row">
1046+
<div class="col-md-12">
1047+
<h3>Code</h3>
1048+
<div hljs language="javascript">
1049+
// HTML
1050+
<div ng-dropdown-multiselect="" options="idPropertyData" selected-model="idPropertyModel" extra-settings="idPropertySettings">
1051+
</div>
1052+
1053+
$scope.idPropertyModel = [{ id: 1 }];
1054+
$scope.idPropertyData = [
1055+
{ id: 1, label: 'David' },
1056+
{ id: 2, label: 'Jhon' },
1057+
{ id: 3, label: 'Danny' },
1058+
];
1059+
$scope.idPropertySettings = {
1060+
idProperty: 'id',
10211061
};
10221062
</div>
10231063
</div>
@@ -1180,14 +1220,14 @@ <h2>Settings</h2>
11801220
<td>btn btn-default</td>
11811221
<td>The CSS classes that used for setting the style of the button.</td>
11821222
</tr>
1183-
<tr>
1184-
<td>
1185-
groupBy
1186-
</td>
1187-
<td>String</td>
1188-
<td>undefined</td>
1189-
<td>The name of the property which you like to group by your options. See grouping example.</td>
1190-
</tr>
1223+
<tr>
1224+
<td>
1225+
groupBy
1226+
</td>
1227+
<td>String</td>
1228+
<td>undefined</td>
1229+
<td>The name of the property which you like to group by your options. See grouping example.</td>
1230+
</tr>
11911231
<tr>
11921232
<td>groupByTextProvider</td>
11931233
<td>Function</td>
@@ -1233,7 +1273,7 @@ <h2>Settings</h2>
12331273
<tr>
12341274
<td>template</td>
12351275
<td>String</td>
1236-
<td> { {getPropertyForObject(option, settings.displayProp)} }</td>
1276+
<td>{ {getPropertyForObject(option, settings.displayProp)} }</td>
12371277
<td>Can be used to modify the appearance of an option in the list, each option is accessible as option.</td>
12381278
</tr>
12391279
<tr>
@@ -1242,14 +1282,14 @@ <h2>Settings</h2>
12421282
<td>undefined</td>
12431283
<td>Values of the groupby property that you want to be selectable as group</td>
12441284
</tr>
1245-
<tr>
1246-
<td>
1247-
checkBoxes
1248-
</td>
1249-
<td>Boolean</td>
1250-
<td>false</td>
1251-
<td>Indicated if to show a normal dropdown with glyphicons or HTML checkboxes.</td>
1252-
</tr>
1285+
<tr>
1286+
<td>
1287+
checkBoxes
1288+
</td>
1289+
<td>Boolean</td>
1290+
<td>false</td>
1291+
<td>Indicated if to show a normal dropdown with glyphicons or HTML checkboxes.</td>
1292+
</tr>
12531293
<tr>
12541294
<td>
12551295
selectedToTop
@@ -1260,6 +1300,16 @@ <h2>Settings</h2>
12601300
When true will put the selected options at the top of the list
12611301
</td>
12621302
</tr>
1303+
<tr>
1304+
<td>
1305+
idProperty
1306+
</td>
1307+
<td>string</td>
1308+
<td>undefined</td>
1309+
<td>
1310+
Used to compare by property instead of by reference.
1311+
</td>
1312+
</tr>
12631313
</tbody>
12641314
</table>
12651315
<h2>Events</h2>

0 commit comments

Comments
 (0)