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

Commit 84ec0b3

Browse files
dotansimhadotansimha
committed
Added Smart Button Text feature and examples
1 parent a25a610 commit 84ec0b3

File tree

3 files changed

+442
-293
lines changed

3 files changed

+442
-293
lines changed

‎pages/javascripts/pages/home/ExampleCtrl.js

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop
8080
{id: 2, label: "Jhon"},
8181
{id: 3, label: "Danny"}];
8282

83-
$scope.example12settings = {selectionLimit: 1};
83+
$scope.example12settings = {selectionLimit: 1};
8484

8585

8686
$scope.example11model = [];
@@ -104,4 +104,41 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop
104104
}
105105
}
106106
};
107+
108+
$scope.example13model = [];
109+
$scope.example13data = [
110+
{id: 1, label: "David"},
111+
{id: 2, label: "Jhon"},
112+
{id: 3, label: "Lisa"},
113+
{id: 4, label: "Nicole"},
114+
{id: 5, label: "Danny"}];
115+
116+
$scope.example13settings = {
117+
smartButtonMaxItems: 3,
118+
smartButtonTextConverter: function(itemText, originalItem) {
119+
if (itemText === 'Jhon') {
120+
return 'Jhonny!';
121+
}
122+
123+
return itemText;
124+
}
125+
};
126+
127+
$scope.example14model = [];
128+
$scope.example14data = [
129+
{id: 1, label: "David"},
130+
{id: 2, label: "Jhon"},
131+
{id: 3, label: "Lisa"},
132+
{id: 4, label: "Nicole"},
133+
{id: 5, label: "Danny"},
134+
{id: 6, label: "Dan"},
135+
{id: 7, label: "Dean"},
136+
{id: 8, label: "Adam"},
137+
{id: 9, label: "Uri"},
138+
{id: 10, label: "Phil"}];
139+
140+
$scope.example14settings = {
141+
scrollableHeight: '100px',
142+
scrollable: true
143+
};
107144
}]);

‎pages/javascripts/pages/home/home.html

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,116 @@ <h3>Code</h3>
8888
</div>
8989
</div>
9090
</accordion-group>
91+
<accordion-group heading="Smart Button Text">
92+
<div class="row">
93+
<div class="col-xs-12">
94+
You can use the feature in order to show which items are selected instead the items count.<br />
95+
In order to use this feature, set the "smartButtonMaxItems" settings parameter to a number bigger than 0.<br />
96+
You can also provide "smartButtonTextConverter" parameter in order to add smart logic and convert the text.
97+
</div>
98+
</div>
99+
<div class="row">
100+
<div class="col-xs-12 col-sm-6">
101+
<h3>Demo</h3>
102+
<div class="well">
103+
<div>
104+
<div ng-dropdown-multiselect options="example13data" selected-model="example13model" extra-settings="example13settings"></div>
105+
</div>
106+
</div>
107+
</div>
108+
<div class="col-xs-12 col-sm-6">
109+
<h3>The model:</h3>
110+
<pre>{{example13model|json}}</pre>
111+
</div>
112+
</div>
113+
<div class="row">
114+
<div class="col-md-12">
115+
<h3>Code</h3>
116+
<div class="well">
117+
<div>
118+
<div hljs>
119+
//HTML
120+
<div ng-dropdown-multiselect options="example13data" selected-model="example13model" extra-settings="example13settings"></div>
121+
122+
//JS
123+
$scope.example13model = [];
124+
$scope.example13data = [
125+
{id: 1, label: "David"},
126+
{id: 2, label: "Jhon"},
127+
{id: 3, label: "Lisa"},
128+
{id: 4, label: "Nicole"},
129+
{id: 5, label: "Danny"}];
130+
131+
$scope.example13settings = {
132+
smartButtonMaxItems: 3,
133+
smartButtonTextConverter: function(itemText, originalItem) {
134+
if (itemText === 'Jhon') {
135+
return 'Jhonny!';
136+
}
137+
138+
return itemText;
139+
}
140+
};
141+
</div>
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
</accordion-group>
147+
<accordion-group heading="Scrollable List">
148+
<div class="row">
149+
<div class="col-xs-12">
150+
You can use the feature in order to make the list of items scrollable. Useful when you deal with a lot of items.
151+
</div>
152+
</div>
153+
<div class="row">
154+
<div class="col-xs-12 col-sm-6">
155+
<h3>Demo</h3>
156+
<div class="well">
157+
<div>
158+
<div ng-dropdown-multiselect options="example14data" selected-model="example14model" extra-settings="example14settings"></div>
159+
</div>
160+
</div>
161+
</div>
162+
<div class="col-xs-12 col-sm-6">
163+
<h3>The model:</h3>
164+
<pre>{{example14model|json}}</pre>
165+
</div>
166+
</div>
167+
<div class="row">
168+
<div class="col-md-12">
169+
<h3>Code</h3>
170+
<div class="well">
171+
<div>
172+
<div hljs>
173+
//HTML
174+
<div ng-dropdown-multiselect options="example14data" selected-model="example14model" extra-settings="example14settings"></div>
175+
176+
//JS
177+
$scope.example14model = [];
178+
$scope.example14data = [
179+
{id: 1, label: "David"},
180+
{id: 2, label: "Jhon"},
181+
{id: 3, label: "Lisa"},
182+
{id: 4, label: "Nicole"},
183+
{id: 5, label: "Danny"},
184+
{id: 6, label: "Dan"},
185+
{id: 7, label: "Dean"},
186+
{id: 8, label: "Adam"},
187+
{id: 9, label: "Uri"},
188+
{id: 10, label: "Phil"}
189+
];
190+
191+
$scope.example14settings = {
192+
scrollableHeight: '100px',
193+
scrollable: true
194+
};
195+
</div>
196+
</div>
197+
</div>
198+
</div>
199+
</div>
200+
</accordion-group>
91201
<accordion-group heading="Enabling Search">
92202
<div class="row">
93203
<div class="col-xs-12 col-sm-6">
@@ -621,6 +731,18 @@ <h2>Settings</h2>
621731
<td>300px</td>
622732
<td>Indicates the height of the drop down if the dropdown is scrollable.</td>
623733
</tr>
734+
<tr>
735+
<td>smartButtonMaxItems</td>
736+
<td>Number</td>
737+
<td>0</td>
738+
<td>Manages the "Smart Button Text" feature, defines the maximum amount of items to on the button.</td>
739+
</tr>
740+
<tr>
741+
<td>smartButtonTextConverter</td>
742+
<td>Function</td>
743+
<td>angular.noop</td>
744+
<td>Related the "Smart Button Text" feature, if a function provided - it will called with two paramters: The item's text and the original item, the return value will displayed instead of the item's display property. This feature is useful when you want to convert the displayed text into something else.</td>
745+
</tr>
624746
</tbody>
625747
</table>
626748
<h2>Events</h2>

0 commit comments

Comments
 (0)