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

Commit 67c90c6

Browse files
dotansimhadotansimha
committed
added checkboxes list
1 parent 147ff66 commit 67c90c6

File tree

6 files changed

+91
-27
lines changed

6 files changed

+91
-27
lines changed

‎angularjs-dropdown-multiselect.js

+40-20
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,7 @@
22

33
var directiveModule = angular.module('angularjs-dropdown-multiselect', []);
44

5-
directiveModule.run(['$templateCache', function($templateCache)
6-
{
7-
var template = '<div class="multiselect-parent btn-group dropdown-multiselect" data-ng-class="{open: open}">';
8-
template +='<button type="button" class="btn btn-default dropdown-toggle" data-ng-click="open=!open;">{{getButtonText()}}<span class="caret"></span></button>';
9-
template += '<ul class="dropdown-menu">';
10-
template += '<li><a data-ng-click="selectAll()"><span class="glyphicon glyphicon-ok"></span> Check All</a>';
11-
template += '<li><a data-ng-click="deselectAll();"><span class="glyphicon glyphicon-remove"></span> Uncheck All</a></li>';
12-
template += '<li class="divider"></li>';
13-
template += '<li data-ng-repeat="option in options"><a data-ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))"><span data-ng-class="isChecked(getPropertyForObject(option,settings.idProp))"></span>{{getPropertyForObject(option, settings.displayProp)}}</a></li>';
14-
template += '</ul>';
15-
template += '</div>';
16-
17-
$templateCache.put('dropdown-multiselect-template.html', template);
18-
}]);
19-
20-
directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', function ($filter, $document) {
5+
directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$compile', function ($filter, $document, $compile) {
216

227
return {
238
restrict: 'AE',
@@ -26,8 +11,42 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', func
2611
options: '=',
2712
extraSettings: '='
2813
},
29-
templateUrl: 'dropdown-multiselect-template.html',
30-
link: function($scope, $element){
14+
template: function(element, attrs)
15+
{
16+
var checkboxes = attrs.checkboxes ? true : false;
17+
18+
var template = '<div class="multiselect-parent btn-group dropdown-multiselect" data-ng-class="{open: open}">';
19+
template +='<button type="button" class="btn btn-default dropdown-toggle" ng-click="toggleDropdown()">{{getButtonText()}}<span class="caret"></span></button>';
20+
template += '<ul class="dropdown-menu dropdown-menu-form">';
21+
template += '<li><a data-ng-click="selectAll()"><span class="glyphicon glyphicon-ok"></span> Check All</a>';
22+
template += '<li><a data-ng-click="deselectAll();"><span class="glyphicon glyphicon-remove"></span> Uncheck All</a></li>';
23+
template += '<li class="divider"></li>';
24+
25+
if(checkboxes)
26+
{
27+
template += '<li data-ng-repeat="option in options"><a ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))"><div class="checkbox"><label><input class="checkboxInput" type="checkbox" ng-click="checkboxClick($event, getPropertyForObject(option,settings.idProp))" ng-checked="isChecked(getPropertyForObject(option,settings.idProp))" /> {{getPropertyForObject(option, settings.displayProp)}}</label></div></a></li>';
28+
}
29+
else {
30+
template += '<li data-ng-repeat="option in options"><a ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))"><span data-ng-class="{\'glyphicon glyphicon-ok\': isChecked(getPropertyForObject(option,settings.idProp))}"></span> {{getPropertyForObject(option, settings.displayProp)}}</a></li>';
31+
}
32+
33+
template += '</ul>';
34+
template += '</div>';
35+
36+
element.html(template);
37+
},
38+
link: function($scope, $element, $attrs){
39+
$scope.toggleDropdown = function()
40+
{
41+
$scope.open = !$scope.open;
42+
};
43+
44+
$scope.checkboxClick = function($event, id)
45+
{
46+
$scope.setSelectedItem(id);
47+
$event.stopImmediatePropagation();
48+
};
49+
3150
$scope.settings = {
3251
dynamicTitle: true,
3352
defaultText: 'Select',
@@ -143,9 +162,10 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', func
143162

144163
$scope.isChecked = function (id) {
145164
if (_.findIndex($scope.selectedModel, getFindObj(id)) !== -1) {
146-
return 'glyphicon glyphicon-ok';
165+
return true;
147166
}
148-
return '';
167+
168+
return false;
149169
};
150170
}
151171
};

‎app.js

-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@
22

33
angular.module('exampleApp', [
44
'ngRoute',
5-
'ngSanitize',
6-
'ngTouch',
7-
'ngAnimate',
85
'angularjs-dropdown-multiselect',
96
'hljs'
107
]).

‎bower.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"name": "angularjs-dropdown-multiselect",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"authors": [
55
"Dotan Simha <[email protected]>"
66
],
77
"description": "AngularJS Dropdown Multiselect directive",
8-
"keywords": ["angular", "angularjs", "directive", "dropdown", "multiselect", "checklist", "list", "bootstrap"],
8+
"keywords": ["angular", "angularjs", "directive", "dropdown", "multiselect", "checklist", "list", "bootstrap", "checkbox"],
99
"license": "MIT",
1010
"main": "angularjs-dropdown-multiselect.min.js",
1111
"ignore": [

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
<script type="text/javascript" src="bower_components/highlightjs/highlight.pack.js"></script>
1818
<script type="text/javascript" src="bower_components/angular-highlightjs/angular-highlightjs.min.js"></script>
1919

20-
<!--<script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>-->
21-
<script type="text/javascript" src="angularjs-dropdown-multiselect.min.js"></script>
20+
<script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>
21+
<!--<script type="text/javascript" src="angularjs-dropdown-multiselect.min.js"></script>-->
2222

2323
<script type="text/javascript" src="app.js"></script>
2424
<script type="text/javascript" src="pages/home/ExampleCtrl.js"></script>

‎pages/home/ExampleCtrl.js

+6
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,10 @@ angular.module('exampleApp').controller('ExampleCtrl', ['$scope', function($scop
5151
{id: 2, label: "Jhon"},
5252
{id: 3, label: "Danny"}];
5353
$scope.example7settings = {externalIdProp: ''};
54+
55+
$scope.example8model = [];
56+
$scope.example8data = [
57+
{id: 1, label: "David"},
58+
{id: 2, label: "Jhon"},
59+
{id: 3, label: "Danny"}];
5460
}]);

‎pages/home/home.html

+41
Original file line numberDiff line numberDiff line change
@@ -318,4 +318,45 @@ <h3>Code</h3>
318318
</div>
319319
</div>
320320
</div>
321+
<div class="row">
322+
<div class="col-xs-12">
323+
<h2 style="margin-bottom: 0">Checkboxes List</h2>
324+
You can also use a checkboxes list by adding "checkboxes" attribute to your element!
325+
</div>
326+
</div>
327+
<div class="row">
328+
<div class="col-xs-12 col-sm-6">
329+
<h3>Demo</h3>
330+
<div class="well">
331+
<div>
332+
<div ng-dropdown-multiselect options="example8data"
333+
selected-model="example8model" checkboxes="true"></div>
334+
</div>
335+
</div>
336+
</div>
337+
<div class="col-xs-12 col-sm-6">
338+
<h3>The model: </h3>
339+
<pre>{{example8model|json}}</pre>
340+
</div>
341+
</div>
342+
<div class="row">
343+
<div class="col-md-12">
344+
<h3>Code</h3>
345+
<div class="well">
346+
<div>
347+
<div hljs>
348+
// HTML
349+
<div ng-dropdown-multiselect options="example8data"
350+
selected-model="example8model" checkboxes="true"></div>
351+
352+
// JavaScript
353+
$scope.example8model = [];
354+
$scope.example8data = [
355+
{id: 1, label: "David"},
356+
{id: 2, label: "Jhon"},
357+
{id: 3, label: "Danny"}];</div>
358+
</div>
359+
</div>
360+
</div>
361+
</div>
321362
</div>

0 commit comments

Comments
 (0)