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

Commit 6003b9b

Browse files
dotansimhadotansimha
committed
Added ability to get full objects in the model + example.
1 parent 50800cf commit 6003b9b

File tree

3 files changed

+96
-16
lines changed

3 files changed

+96
-16
lines changed

‎angularjs-dropdown-multiselect.js‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,21 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', func
3838

3939
angular.extend($scope.settings, $scope.extraSettings || []);
4040

41+
function getFindObj(id)
42+
{
43+
var findObj = {};
44+
45+
if ($scope.settings.externalIdProp === '')
46+
{
47+
findObj[$scope.settings.idProp] = id;
48+
}
49+
else {
50+
findObj[$scope.settings.externalIdProp] = id;
51+
}
52+
53+
return findObj;
54+
}
55+
4156
if ($scope.settings.closeOnBlur) {
4257
$document.on('click', function (e) {
4358
var target = e.target.parentElement;
@@ -77,8 +92,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', func
7792
{
7893
return $scope.settings.defaultText;
7994
}
80-
}
81-
95+
};
8296

8397
$scope.getPropertyForObject = function(object, property)
8498
{
@@ -104,25 +118,31 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', func
104118

105119
$scope.setSelectedItem = function(id, dontRemove){
106120
dontRemove = dontRemove || false;
107-
var findObj = {};
108-
findObj[$scope.settings.externalIdProp] = id;
121+
var findObj = getFindObj(id);
109122

110123
var exists = _.findIndex($scope.selectedModel, findObj) !== -1;
111124

112125
if (!dontRemove && exists) {
113126
$scope.selectedModel.splice(_.findIndex($scope.selectedModel, findObj), 1);
114127
} else if (!exists) {
115-
$scope.selectedModel.push(findObj);
128+
if ($scope.settings.externalIdProp === '')
129+
{
130+
var fullObjFind = getFindObj(id);
131+
var fullObj = _.find($scope.options, fullObjFind);
132+
$scope.selectedModel.push(fullObj);
133+
}
134+
else
135+
{
136+
$scope.selectedModel.push(findObj);
137+
}
138+
116139
}
117140

118141
return false;
119142
};
120143

121144
$scope.isChecked = function (id) {
122-
var findObj = {};
123-
findObj[$scope.settings.externalIdProp] = id;
124-
125-
if (_.findIndex($scope.selectedModel, findObj) !== -1) {
145+
if (_.findIndex($scope.selectedModel, getFindObj(id)) !== -1) {
126146
return 'glyphicon glyphicon-ok';
127147
}
128148
return '';

‎pages/home/ExampleCtrl.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,26 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop
2929
{id: 1, label: "David"},
3030
{id: 2, label: "Jhon"},
3131
{id: 3, label: "Danny"}];
32-
$scope.example4settings = {displayProp: 'label', idProp: 'label', externalIdProp: 'myCustomPropertyForTheObject'};
32+
$scope.example4settings = {displayProp: 'label', idProp: 'id', externalIdProp: 'myCustomPropertyForTheObject'};
3333

3434
$scope.example5model = [];
3535
$scope.example5data = [
3636
{id: 1, label: "David"},
3737
{id: 2, label: "Jhon"},
3838
{id: 3, label: "Danny"}];
3939
$scope.example5settings = {defaultText: 'Select Users'};
40+
41+
$scope.example6model = [{id: 1}, {id: 3}];
42+
$scope.example6data = [
43+
{id: 1, label: "David"},
44+
{id: 2, label: "Jhon"},
45+
{id: 3, label: "Danny"}];
46+
$scope.example6settings = {};
47+
48+
$scope.example7model = [];
49+
$scope.example7data = [
50+
{id: 1, label: "David"},
51+
{id: 2, label: "Jhon"},
52+
{id: 3, label: "Danny"}];
53+
$scope.example7settings = {externalIdProp: ''};
4054
}]);

‎pages/home/home.html‎

Lines changed: 52 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="container">
1+
<div class="container" ng-controller="ExampleCtrl">
22
<div class="row">
33
<div class="col-xs-12 col-sm-8">
44
<h1 class="title">AngularJS Dropdown Multiselect</h1>
@@ -20,7 +20,7 @@ <h1 class="title">AngularJS Dropdown Multiselect</h1>
2020
<h2 style="margin-bottom: 0">Basic Usage Example</h2>
2121
</div>
2222
</div>
23-
<div ng-controller="ExampleCtrl" class="row">
23+
<div class="row">
2424
<div class="col-xs-12 col-sm-6">
2525
<h3>Demo</h3>
2626
<div class="well">
@@ -41,7 +41,7 @@ <h2 style="margin-bottom: 0">Basic Settings Example</h2>
4141
In this case, the property the used as label is "id".
4242
</div>
4343
</div>
44-
<div ng-controller="ExampleCtrl" class="row">
44+
<div class="row">
4545
<div class="col-xs-12 col-sm-6">
4646
<h3>Demo</h3>
4747
<div class="well">
@@ -67,7 +67,7 @@ <h2 style="margin-bottom: 0">Custom ID property</h2>
6767
This feature is also useful if your objects comes from MongoDB and have a "_id" property instead of "id".
6868
</div>
6969
</div>
70-
<div ng-controller="ExampleCtrl" class="row">
70+
<div class="row">
7171
<div class="col-xs-12 col-sm-6">
7272
<h3>Demo</h3>
7373
<div class="well">
@@ -90,7 +90,7 @@ <h2 style="margin-bottom: 0">Model Custom Property</h2>
9090
You can modify this by using the externalIdProp in settings!
9191
</div>
9292
</div>
93-
<div ng-controller="ExampleCtrl" class="row">
93+
<div class="row">
9494
<div class="col-xs-12 col-sm-6">
9595
<h3>Demo</h3>
9696
<div class="well">
@@ -111,7 +111,7 @@ <h2 style="margin-bottom: 0">Custom Button Text</h2>
111111
You can select your own text of the button using the "defaultText" in settings.
112112
</div>
113113
</div>
114-
<div ng-controller="ExampleCtrl" class="row">
114+
<div class="row">
115115
<div class="col-xs-12 col-sm-6">
116116
<h3>Demo</h3>
117117
<div class="well">
@@ -126,4 +126,50 @@ <h3>The model: </h3>
126126
<pre>{{example5model|json}}</pre>
127127
</div>
128128
</div>
129+
<div class="row">
130+
<div class="col-xs-12">
131+
<h2 style="margin-bottom: 0">Pre-selected values</h2>
132+
This example shows a demostration of using a pre-setted model.<br />
133+
<strong>Note: </strong>The model must be structured as array of objects with "id" property (or whatever you use as custom id).
134+
</div>
135+
</div>
136+
<div class="row">
137+
<div class="col-xs-12 col-sm-6">
138+
<h3>Demo</h3>
139+
<div class="well">
140+
<div>
141+
<div ng-dropdown-multiselect options="example6data"
142+
selected-model="example6model" extra-settings="example6settings"></div>
143+
</div>
144+
</div>
145+
</div>
146+
<div class="col-xs-12 col-sm-6">
147+
<h3>The model: </h3>
148+
<pre>{{example6model|json}}</pre>
149+
</div>
150+
</div>
151+
<div class="row">
152+
<div class="col-xs-12">
153+
<h2 style="margin-bottom: 0">Full Object as model</h2>
154+
This example shows a demostration of using full object as a model. <br />
155+
This can be done by settings the "externalIdProp" to empty string.<br />
156+
<strong>Note: The object detection and the logic of deciding which object is selected is still
157+
uses only the "id" property, so you can even modify the objects in the model without worry.</strong>
158+
</div>
159+
</div>
160+
<div class="row">
161+
<div class="col-xs-12 col-sm-6">
162+
<h3>Demo</h3>
163+
<div class="well">
164+
<div>
165+
<div ng-dropdown-multiselect options="example7data"
166+
selected-model="example7model" extra-settings="example7settings"></div>
167+
</div>
168+
</div>
169+
</div>
170+
<div class="col-xs-12 col-sm-6">
171+
<h3>The model: </h3>
172+
<pre>{{example7model|json}}</pre>
173+
</div>
174+
</div>
129175
</div>

0 commit comments

Comments
 (0)