├── .gitignore
├── .jshintrc
├── LICENSE
├── README.md
├── bower.json
├── dist
    └── bsDropdown.min.js
├── example
    ├── index.html
    └── js
    │   └── app.js
├── gulpfile.js
├── package.json
├── src
    └── bsDropdown.js
├── template
    └── defaultTemplate.html
└── test
    ├── bsDropdown-multiselect-test.js
    ├── bsDropdown-test.js
    └── karma.conf.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components
3 | *~


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"strict": true,
3 | 	"globals":{
4 | 		"angular": false
5 | 	}
6 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 AllenFang (方紹昌)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # angular-bootstrap-dropdown
 2 | It's a angular directive for bootstrap dropdown, named 'bsDropdown'   
 3 | 
 4 | The bsDropdown include all basic function in dropdown, include set default value, and listen change etc.   
 5 | 
 6 | Also support multi-select on newest version.   
 7 | 
 8 | angular-bootstrap-dropdown dependencies on AngularJS 1.2.x and Bootstrap 3   
 9 | 
10 | You can see an online demo on [here](http://frozen-tundra-7264.herokuapp.com/examples/L8/#).   
11 | 
12 | ### Versions
13 | 0.1.0 support basic function in bsDropdown, include use ng-model to set default value, and ng-change to listen change   
14 | 
15 | 0.1.1 add bootstrap divider in bsDropdown 
16 | 
17 | 0.2.0 add bootstrap dropdown disabled and item disabled in bsDropdown   
18 |  
19 | 0.9.0(latest) add multi-select to bsDropdown!!   
20 | 
21 | ### Development
22 | ```
23 | $ git clone https://github.com/AllenFang/angular-bootstrap-dropdown.git
24 | $ cd angular-practice-example
25 | $ npm install
26 | $ bower install
27 | ```
28 | Use gulp to test the bsDropdown
29 | ```
30 | $ npm test
31 | or
32 | $ node_modules/gulp/bin/gulp.js test
33 | ```
34 | 
35 | 
36 | ### Usage
37 | Include the angular-bootstrap-dropdown library to your html page
38 | ```
39 | <script src="bsDropdown.min.js"></script>
40 | ```
41 | The ```bsDropdown.min.js``` is in the dist folder.
42 | In the next, include the ```ng.bs.dropdown``` to your angular module dependencies  
43 | ```
44 | angular.module("demoApp", ['ng.bs.dropdown'])
45 | ```
46 | Then, you can go to use the angular-bootstrap-dropdown, below is a simple example  
47 | 
48 | First of all, give an angular controller
49 | ```
50 | angular.module("demoApp", ['ng.bs.dropdown'])
51 | 	.controller("YearController", function($scope){
52 | 		$scope.years = [
53 | 			"2015",
54 | 			"2014",
55 | 			"2013",
56 | 			"2012",
57 | 			"2011",
58 | 			"2010"
59 | 		];
60 | 		$scope.selectYear = $scope.years[2];  //current select item
61 | 		
62 | 		/*changeYear function will be called if dropdown change*/
63 | 		$scope.changeYear = function(){
64 | 			console.log("YearController say... " + $scope.selectYear);
65 | 		}
66 | 	});
67 | ```
68 | 
69 | So here is your partial html code
70 | ```
71 | <div ng-controller="YearController">
72 | 			<h4>You select {{selectYear}} ....</h4><br/>
73 | 			<div bs-dropdown 
74 | 			     bs-dropdown-display="MyDropDown" 
75 | 				 bs-dropdown-items="years" 
76 | 			     ng-model="selectYear" 
77 | 			     ng-change="changeYear()"></div>
78 | </div>
79 | ```
80 | 
81 | ### Setting
82 | Use ```bs-dropdown-display``` attribute to display default text on dropdown if there is no any default value selected  
83 | Use ```bs-dropdown-items``` attribute to specify the dropdown options  
84 | Use ```ng-model``` to set the default selected value   
85 | Use ```ng-change``` to listen up the change event on dropdown  
86 | Use ```bs-dropdown-divider``` to specify the divider, for example bs-dropdown-divider="{{[2,5]}}".   
87 | Use ```bs-dropdown-item-disabled``` to specify which option should be disabled,for example bs-dropdown-item-disabled="{{[2,5]}}".   
88 | Use ```bs-dropdown-disabled``` to set dropdown disabled, for example bs-dropdown-disabled="true".   
89 | Use ```bs-dropdown-multi``` to specify bsDropdown to be a multi-select dropdown.   


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-bootstrap-dropdown",
 3 |   "version": "0.9.0",
 4 |   "homepage": "https://github.com/AllenFang/angular-bootstrap-dropdown",
 5 |   "authors": [
 6 |     "AllenFang <ayu780129@hotmail.com>"
 7 |   ],
 8 |   "description": "It's a angular directive for bootstrap dropdown and multi-select",
 9 |   "keywords": [
10 |     "angular",
11 |     "directive",
12 |     "bootstrap",
13 |     "dropdown",
14 |     "select",
15 |     "multiSelect"
16 |   ],
17 |   "main": [
18 |     "dist/bsDropdown.min.js"
19 |   ],
20 |   "license": "MIT",
21 |   "ignore": [
22 |     "node_modules",
23 |     "bower_components",
24 |     "test",
25 |     "example"
26 |   ],
27 |   "dependencies": {
28 |     "angular": "~1.3.14",
29 |     "bootstrap": "~3.3.2"
30 |   },
31 |   "devDependencies": {
32 |     "angular-mocks": "~1.3.14"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/dist/bsDropdown.min.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"use strict";var i=t.module("ng.bs.dropdown",[]);i.constant("bsDropdownCfg",{display:"DropDown",disabled:!1,divider:[],disabledItems:[]}),i.run(["$templateCache",function(e){e.put("bsDropdown/templates/defaultTemplate.html",['<div class="dropdown">','<button class="btn btn-default dropdown-toggle" type="button" id="bsDropDown" data-toggle="dropdown" aria-expanded="true">',"{{showText}}",'<span class="caret"></span>',"</button>",'<ul class="dropdown-menu" role="menu" aria-labelledby="bsDropDown">',"<li role='presentation' ng-repeat='item in _bsDropdownItems' ng-class='{divider:item.isDivider, disabled: item.isDisabled}'>",'<a ng-if="!item.isDivider" role="menuitem" tabindex="-1" href="" ng-click="selectItem(item)">{{item.text}}</a>',"</li>","</ul>","</div>"].join("")),e.put("bsDropdown/templates/multiSelectTemplate.html",['<div class="dropdown">','<button class="btn btn-default dropdown-toggle" type="button" id="bsDropDown" data-toggle="dropdown" aria-expanded="true">',"{{showText}}",'<span class="caret"></span>',"</button>",'<ul class="dropdown-menu" role="menu" aria-labelledby="bsDropDown">',"<li role='presentation' ng-repeat='item in _bsDropdownItems' ng-class='{divider:item.isDivider, disabled: item.isDisabled}'>",'<a ng-if="!item.isDivider" role="menuitem" tabindex="-1" href="" ng-click="selectItem(item)">','<input type="checkbox" ng-checked="item.checked"/> {{item.text}}',"</a>","</li>","</ul>","</div>"].join(""))}]),i.controller("bsDropdownController",["$scope","$element","$attrs",function(e){var i,n=this;this.init=function(d){i=d,i.$render=function(){var d=t.isDefined(e.selected);d&&i.$setViewValue(e.selected),n.$render(i.$viewValue),e.multiSelect&&(d||(e.selected=i.$viewValue),n.checkMultiOptions())}},this.checkMultiOptions=function(){for(var t=0;t<e._bsDropdownItems.length;t++){var i=e._bsDropdownItems[t];e._bsDropdownItems[t].checked=-1!=e.selected.indexOf(i.text)?!0:!1}},e.selectItem=function(t){var n=t.text;if(!t.isDisabled){if(e.multiSelect){var d=-1;if(-1==(d=e.selected.indexOf(n))){for(var s=[],o=0;o<e.selected.length;o++)s.push(e.selected[o]);s.push(n),e.selected=s}else{for(var s=[],o=0;o<e.selected.length;o++)o!=d&&s.push(e.selected[o]);e.selected=s}}else e.selected=n;i.$render()}}}]),i.directive("bsDropdown",["bsDropdownCfg",function(e){return{scope:{bsDropdownItems:"="},require:["bsDropdown","?ngModel"],controller:"bsDropdownController",templateUrl:function(e,i){return t.isDefined(i.bsDropdownMulti)?"bsDropdown/templates/multiSelectTemplate.html":"bsDropdown/templates/defaultTemplate.html"},link:function(i,n,d,s){function o(){var e=(+new Date+Math.floor(999999*Math.random())).toString(36);n.find("#bsDropDown").attr("id",e),n.find(".dropdown-menu").attr("aria-labelledby",e),l(c),i.disabled&&n.find("button").addClass("disabled")}function l(e){var n=e;t.isArray(n)&&(n=0==n.length?null:n.join()),i.showText=null!==n?n:c}function r(){for(var e=[],t=0,n=0;n<i.bsDropdownItems.length;n++){var d=-1!=i.divider.indexOf(n),s=-1!=i.disabledItems.indexOf(n),o=i.bsDropdownItems[n];if(d){var l=a(t++,o,!d,s),r=a(t++,null,d,!1);e.push(l),e.push(r)}else{var l=a(t++,o,d,s);e.push(l)}}return e}function a(e,t,i,n){return{_k:e,text:t,isDivider:i,isDisabled:n}}var p=s[0],b=s[1],c=t.isDefined(d.bsDropdownDisplay)?d.bsDropdownDisplay:e.display;i._bsDropdownItems=i.bsDropdownItems,i.divider=t.isDefined(d.bsDropdownDivider)?i.$eval(d.bsDropdownDivider):e.divider,i.disabledItems=t.isDefined(d.bsDropdownItemDisabled)?i.$eval(d.bsDropdownItemDisabled):e.disabledItems,i.disabled=t.isDefined(d.bsDropdownDisabled)?i.$eval(d.bsDropdownDisabled):e.disabled,i.multiSelect=t.isDefined(d.bsDropdownMulti),p.init(b),p.$render=function(e){l(e)},i._bsDropdownItems=r(),o()},restrict:"AE"}}])}(window,window.angular);


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <html ng-app="demoApp">
 2 | 	<head>
 3 | 		<title>bsDropdown demo</title>
 4 | 		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 5 | 		<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
 6 | 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
 7 | 		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
 8 | 		<script src="../src/bsDropdown.js"></script>
 9 | 		<script src="js/app.js"></script>
10 | 	</head>
11 | 	<body>
12 | 		<div class="col-md-offset-0 col-md-3">
13 | 	        <div class="panel panel-default">
14 | 				<div class="panel-heading">A basic function demo for bsDropdown.</div>
15 | 				<div class="panel-body" ng-controller="YearController">
16 | 			    	<p>You select {{selectYear}} ....</p>
17 | 					<div bs-dropdown 
18 | 					     bs-dropdown-display="MyDropDown" 
19 | 						 bs-dropdown-items="years" 
20 | 						 ng-model="selectYear" 
21 | 						 ng-change="changeYear()"></div>
22 | 				</div>
23 | 			</div>
24 | 	        <div class="panel panel-default">
25 | 				<div class="panel-heading">A divider demo for bsDropdown.</div>
26 | 		        <div class="panel-body" ng-controller="DividerController">
27 | 					<div bs-dropdown 
28 | 					     bs-dropdown-display="MyDropDown" 
29 | 						 bs-dropdown-items="actions" 
30 | 						 bs-dropdown-divider="{{[2,5]}}" 
31 | 						 ng-model="selectAction"></div>
32 | 		        </div>
33 | 		    </div>
34 | 		    <div class="panel panel-default">
35 | 				<div class="panel-heading">A disabled items demo for bsDropdown.</div>
36 | 		        <div class="panel-body" ng-controller="DividerController">
37 | 					<div bs-dropdown 
38 | 					     bs-dropdown-display="MyDropDown" 
39 | 						 bs-dropdown-items="actions" 
40 | 						 bs-dropdown-item-disabled="{{[2,5]}}" 
41 | 						 ng-model="selectAction"></div>
42 | 		        </div>
43 | 		    </div>
44 | 		    <div class="panel panel-default">
45 | 				<div class="panel-heading">A disabled dropdown demo for bsDropdown.</div>
46 | 		        <div class="panel-body" ng-controller="DividerController">
47 | 					<div bs-dropdown 
48 | 						 bs-dropdown-disabled="true" 
49 | 					     bs-dropdown-display="DisabledDropDown" 
50 | 						 bs-dropdown-items="actions" 
51 | 						 ng-model="selectAction"></div>
52 | 		        </div>
53 | 		    </div>
54 | 		    <div class="panel panel-default">
55 | 				<div class="panel-heading">A multiselect dropdown demo for bsDropdown.</div>
56 | 		        <div class="panel-body" ng-controller="MultiSelectController">
57 | 					<div bs-dropdown 
58 | 						 bs-dropdown-multi 
59 | 					     bs-dropdown-display="Multiselect" 
60 | 						 bs-dropdown-items="actions" 
61 | 						 ng-model="selectAction" 
62 | 						 bs-dropdown-item-disabled="{{[0,5]}}" 
63 | 						 bs-dropdown-divider="{{[2,5]}}" 
64 | 						 ng-change="change()"></div>
65 | 		        </div>
66 | 		    </div>
67 | 	    </div>
68 |         <h2>Tutorial</h2>
69 |         <pre style="background-color: #BBBBBB; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: border-box; color: black; font-family: Monaco, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; padding: 9.5px; white-space: pre-wrap; word-break: break-all; word-wrap: break-word;"><span class="nv" style="box-sizing: border-box; color: black;">
70 | 
71 |         1. Use bs-dropdown-display attribute in bsDropdown to specify the default text on dropdown
72 | 
73 |         2. Use bs-dropdown-items(required) attribute in bsDropdown to specify the options you want to display in dropdown
74 | 
75 |         3. Use ng-model(required) attribute in bsDropdown to specify the current selected option in dropndown.<br/> 
76 |            If no data you want to select on doopwodn default, you can give null value.<br/> 
77 |            For example, you can modify $scope.selectYear = null; in YearController in this example.
78 | 
79 |         4. Use ng-change to listen a change event on bsDropdown.<br/> 
80 | 
81 |         5. Use bs-dropdown-divider to specify the divider, for example bs-dropdown-divider="{{[2,5]}}".<br/>  
82 | 
83 |         6. Use bs-dropdown-item-disabled to specify which option should be disabled,<br/>
84 |            for example bs-dropdown-item-disabled="{{[2,5]}}".<br/>  
85 | 
86 |         7. Use bs-dropdown-disabled to set bsDropdown disabled, for example bs-dropdown-disabled="true".<br/>  
87 | 
88 |         8. Use bs-dropdown-multi to specify bsDropdown to be a multi-select dropdown.<br/>  
89 |         </pre>
90 | 	</body>
91 | </html>


--------------------------------------------------------------------------------
/example/js/app.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | angular.module("demoApp", ['ng.bs.dropdown'])
 4 | 	.controller("YearController", function($scope){
 5 | 		$scope.years = [
 6 | 			"2015",
 7 | 			"2014",
 8 | 			"2013",
 9 | 			"2012",
10 | 			"2011",
11 | 			"2010"
12 | 		];
13 | 		$scope.selectYear = $scope.years[2];
14 | 		$scope.changeYear = function(){
15 | 			console.log("YearController say... " + $scope.selectYear);
16 | 		}
17 | 	})
18 | 	.controller("DividerController", function($scope){
19 | 		$scope.actions = [
20 | 			"Action",
21 | 			"Another action",
22 | 			"Something else here",
23 | 			"separated link1",
24 | 			"Action anain",
25 | 			"Nothing else",
26 | 			"separated link2"
27 | 		];
28 | 		$scope.selectAction = null;
29 | 	})
30 | 	.controller("MultiSelectController", function($scope){
31 | 		$scope.actions = [
32 | 			"Action",
33 | 			"Another action",
34 | 			"Something else here",
35 | 			"separated link1",
36 | 			"Action anain",
37 | 			"Nothing else",
38 | 			"separated link2"
39 | 		];
40 | 		$scope.selectAction = [$scope.actions[0],$scope.actions[3]];
41 | 		$scope.change = function(){
42 | 			console.log("MultiSelectController say... " + $scope.selectAction);
43 | 		}
44 | 	});;


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | var gulp = require('gulp');
 4 | var jshint = require('gulp-jshint');
 5 | var uglify = require('gulp-uglify');
 6 | var rename = require('gulp-rename');
 7 | var karma = require('gulp-karma');
 8 | 
 9 | var srcFile = 'src/bsDropdown.js';
10 | var testFile = [
11 | 	'./bower_components/angular/angular.min.js',
12 |     './bower_components/angular-mocks/angular-mocks.js',
13 |     './src/bsDropdown.js',
14 |     './test/bsDropdown-test.js'
15 | ];
16 | 
17 | gulp.task('default', ['test', 'jshint', 'uglify']);
18 | gulp.task('dev', function(){
19 | 	return gulp.watch([srcFile], ['default'])
20 | });
21 | 
22 | 
23 | gulp.task('jshint', function(){
24 | 	return gulp.src(srcFile)
25 | 		.pipe(jshint())
26 | 		.pipe(jshint.reporter('default'));
27 | });
28 | 
29 | gulp.task('uglify', function(){
30 | 	return gulp.src(srcFile)
31 | 		.pipe(uglify({
32 | 			preserveComments: 'some'
33 | 		}))
34 | 		.pipe(rename({
35 | 			suffix: '.min'
36 | 		}))
37 | 		.pipe(gulp.dest('dist'));
38 | });
39 | 
40 | gulp.task('test', function(){
41 | 	return gulp.src(testFile)
42 | 		.pipe(karma({
43 | 			configFile: 'test/karma.conf.js',
44 | 			action: 'run'
45 | 		}))
46 | 		.on('error', function(err){
47 | 			throw err;
48 | 		});
49 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-bootstrap-dropdown",
 3 |   "version": "0.9.0",
 4 |   "description": "It's a angular directive for bootstrap dropdown and multi-select.",
 5 |   "scripts": {
 6 |     "test": "node_modules/karma/bin/karma start test/karma.conf.js"
 7 |   },
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "https://github.com/AllenFang/angular-bootstrap-dropdown.git"
11 |   },
12 |   "keywords": [
13 |     "angular",
14 |     "directive",
15 |     "bootstrap",
16 |     "dropdown",
17 |     "select",
18 |     "multiSelect"
19 |   ],
20 |   "author": "AllenFang",
21 |   "license": "MIT",
22 |   "devDependencies": {
23 |     "gulp": "~3.8.11",
24 |     "gulp-jshint": "~1.9.2",
25 |     "gulp-uglify": "~1.1.0",
26 |     "gulp-rename": "~1.2.0",
27 |     "karma": "~0.12.31",
28 |     "karma-cli": "0.0.4",
29 |     "jasmine-core": "~2.2.0",
30 |     "karma-jasmine": "~0.3.5",
31 |     "karma-chrome-launcher": "~0.1.7",
32 |     "gulp-karma": "0.0.4"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/bsDropdown.js:
--------------------------------------------------------------------------------
  1 | (function(window, angular, undefined){
  2 | 'use strict';
  3 | 
  4 | var bd = angular.module("ng.bs.dropdown", []);
  5 | bd.constant('bsDropdownCfg', {
  6 | 	display: 'DropDown',
  7 | 	disabled: false,
  8 | 	divider:[],
  9 | 	disabledItems: []
 10 | });
 11 | bd.run(['$templateCache', function($templateCache){
 12 | 	$templateCache.put('bsDropdown/templates/defaultTemplate.html',[
 13 | 		'<div class="dropdown">',
 14 | 		  '<button class="btn btn-default dropdown-toggle" type="button" id="bsDropDown" data-toggle="dropdown" aria-expanded="true">',
 15 | 		    '{{showText}}',
 16 | 		    '<span class="caret"></span>',
 17 | 		  '</button>',
 18 | 		  '<ul class="dropdown-menu" role="menu" aria-labelledby="bsDropDown">',
 19 | 		    "<li role='presentation' ng-repeat='item in _bsDropdownItems' ng-class='{divider:item.isDivider, disabled: item.isDisabled}'>",
 20 | 		      '<a ng-if="!item.isDivider" role="menuitem" tabindex="-1" href="" ng-click="selectItem(item)">{{item.text}}</a>',
 21 | 		    '</li>',
 22 | 		  '</ul>',
 23 | 		'</div>'
 24 | 	].join(''));
 25 | 
 26 | 	$templateCache.put('bsDropdown/templates/multiSelectTemplate.html',[
 27 | 		'<div class="dropdown">',
 28 | 		  '<button class="btn btn-default dropdown-toggle" type="button" id="bsDropDown" data-toggle="dropdown" aria-expanded="true">',
 29 | 		    '{{showText}}',
 30 | 		    '<span class="caret"></span>',
 31 | 		  '</button>',
 32 | 		  '<ul class="dropdown-menu" role="menu" aria-labelledby="bsDropDown">',
 33 | 		    "<li role='presentation' ng-repeat='item in _bsDropdownItems' ng-class='{divider:item.isDivider, disabled: item.isDisabled}'>",
 34 | 		      '<a ng-if="!item.isDivider" role="menuitem" tabindex="-1" href="" ng-click="selectItem(item)">',
 35 | 		      	  '<input type="checkbox" ng-checked="item.checked"/> {{item.text}}',
 36 | 		      '</a>',
 37 | 		    '</li>',
 38 | 		  '</ul>',
 39 | 		'</div>'
 40 | 	].join(''));
 41 | }]);
 42 | bd.controller("bsDropdownController", 
 43 | 	["$scope", "$element", "$attrs", function($scope, $element, $attrs){
 44 | 		var ngModelCtrl, self = this;
 45 | 		this.init = function(ngModelCtrl_){
 46 | 			ngModelCtrl = ngModelCtrl_;
 47 | 			ngModelCtrl.$render = function(){
 48 | 				var isSelectValDefined = angular.isDefined($scope.selected);
 49 | 				if(isSelectValDefined)
 50 | 					ngModelCtrl.$setViewValue($scope.selected);
 51 | 
 52 | 				self.$render(ngModelCtrl.$viewValue);
 53 | 				if($scope.multiSelect) {
 54 | 					if(!isSelectValDefined)
 55 | 						$scope.selected = ngModelCtrl.$viewValue;
 56 | 					self.checkMultiOptions();
 57 | 				}
 58 | 			};
 59 | 		};
 60 | 
 61 | 		this.checkMultiOptions = function(){
 62 | 			for(var i=0;i<$scope._bsDropdownItems.length;i++){
 63 | 				var item = $scope._bsDropdownItems[i];
 64 | 				if($scope.selected.indexOf(item.text) != -1){
 65 | 					$scope._bsDropdownItems[i].checked = true;
 66 | 				}else{
 67 | 					$scope._bsDropdownItems[i].checked = false;
 68 | 				}
 69 | 			}
 70 | 		};
 71 | 
 72 | 		$scope.selectItem = function(item){
 73 | 			var text = item.text;
 74 | 			if(!item.isDisabled){
 75 | 				if($scope.multiSelect)	{
 76 | 					var index = -1;
 77 | 					if((index=$scope.selected.indexOf(text)) == -1){
 78 | 						var newSelected = [];
 79 | 						for(var i=0;i<$scope.selected.length;i++){
 80 | 							newSelected.push($scope.selected[i]);
 81 | 						}
 82 | 						newSelected.push(text);
 83 | 						$scope.selected = newSelected;
 84 | 					}
 85 | 					else{
 86 | 						var newSelected = [];
 87 | 						for(var i=0;i<$scope.selected.length;i++){
 88 | 							if(i != index) newSelected.push($scope.selected[i]);
 89 | 						}
 90 | 						$scope.selected = newSelected;
 91 | 					}
 92 | 				} else{
 93 | 					$scope.selected = text;
 94 | 				}
 95 | 				ngModelCtrl.$render();
 96 | 			}
 97 | 		};
 98 | }]);
 99 | bd.directive("bsDropdown", ['bsDropdownCfg', function(bsDropdownCfg){
100 | 		return{
101 | 			scope:{
102 | 				bsDropdownItems: "="
103 | 			},
104 | 			require: ['bsDropdown','?ngModel'],
105 | 			controller: "bsDropdownController", 
106 | 			templateUrl: function(elem, attr){
107 | 				return angular.isDefined(attr.bsDropdownMulti)?
108 | 					"bsDropdown/templates/multiSelectTemplate.html":
109 | 					"bsDropdown/templates/defaultTemplate.html";
110 | 			}, 
111 | 			link: function(scope, el, attr, ctrls){
112 | 				var bsDropdownCtrl = ctrls[0], ngModelCtrl = ctrls[1];
113 | 				var defaultDisplay = angular.isDefined(attr.bsDropdownDisplay)?
114 | 										attr.bsDropdownDisplay:bsDropdownCfg.display;
115 | 
116 | 				scope._bsDropdownItems = scope.bsDropdownItems;
117 | 				scope.divider = angular.isDefined(attr.bsDropdownDivider)?
118 | 									scope.$eval(attr.bsDropdownDivider):bsDropdownCfg.divider;
119 | 				scope.disabledItems = angular.isDefined(attr.bsDropdownItemDisabled)?
120 | 										scope.$eval(attr.bsDropdownItemDisabled):bsDropdownCfg.disabledItems;
121 | 				scope.disabled = angular.isDefined(attr.bsDropdownDisabled)?
122 | 									scope.$eval(attr.bsDropdownDisabled):bsDropdownCfg.disabled;
123 | 				scope.multiSelect = angular.isDefined(attr.bsDropdownMulti);
124 | 
125 | 				bsDropdownCtrl.init(ngModelCtrl);
126 | 				bsDropdownCtrl.$render = function(displayText){
127 | 					changeShowText(displayText);
128 | 				};
129 | 				
130 | 				scope._bsDropdownItems = createDropdownItems();
131 | 				bsDropdownRender();
132 | 				
133 | 				function bsDropdownRender(){
134 | 					var id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);
135 | 					el.find("#bsDropDown").attr("id", id);
136 | 					el.find(".dropdown-menu").attr("aria-labelledby", id);
137 | 					changeShowText(defaultDisplay);
138 | 					if(scope.disabled){
139 | 						el.find("button").addClass("disabled");
140 | 					}
141 | 				}
142 | 
143 | 				function changeShowText(text){
144 | 					var _text = text;
145 | 					if(angular.isArray(_text)) {
146 | 						if(_text.length == 0)
147 | 							_text = null;
148 | 						else
149 | 							_text = _text.join();
150 | 					}
151 | 					scope.showText = _text !== null?_text:defaultDisplay;
152 | 				}
153 | 
154 | 				function createDropdownItems(){
155 | 					var dropdownItem = [];
156 | 					var _k = 0;
157 | 					for(var i=0;i<scope.bsDropdownItems.length;i++){
158 | 						var isDivider = scope.divider.indexOf(i)!=-1;
159 | 						var isDisabled = scope.disabledItems.indexOf(i)!=-1;
160 | 						var text = scope.bsDropdownItems[i];
161 | 						if(isDivider){
162 | 							var option  = _createDropdownItemObj(_k++, text, !isDivider, isDisabled);
163 | 							var divider = _createDropdownItemObj(_k++, null, isDivider, false);
164 | 							dropdownItem.push(option);
165 | 							dropdownItem.push(divider);
166 | 						}else{
167 | 							var option = _createDropdownItemObj(_k++, text, isDivider, isDisabled);
168 | 							dropdownItem.push(option);
169 | 						}
170 | 					}
171 | 					return dropdownItem;
172 | 				}
173 | 
174 | 				function _createDropdownItemObj(k, text_, isDivider_, isDisabled_){
175 | 					return {
176 | 						_k: k,
177 | 						text: text_,
178 | 						isDivider: isDivider_,
179 | 						isDisabled: isDisabled_
180 | 					};
181 | 				}
182 | 			},
183 | 			restrict: "AE"
184 | 		};
185 | 	}]);
186 | })(window, window.angular);


--------------------------------------------------------------------------------
/template/defaultTemplate.html:
--------------------------------------------------------------------------------
 1 | <div class="dropdown">
 2 |   <button class="btn btn-default dropdown-toggle" type="button" id="myDropDown" data-toggle="dropdown" aria-expanded="true">
 3 |     {{showText}}
 4 |     <span class="caret"></span>
 5 |   </button>
 6 |   <ul class="dropdown-menu" role="menu" aria-labelledby="myDropDown">
 7 |     <li role="presentation" ng-repeat="item in items">
 8 |       <a role="menuitem" tabindex="-1" href="#" ng-click="selectItem(item)">{{item}}</a>
 9 |     </li>
10 |   </ul>
11 | </div>


--------------------------------------------------------------------------------
/test/bsDropdown-multiselect-test.js:
--------------------------------------------------------------------------------
 1 | describe("bsDropdown multi-select Tests", function(){
 2 | 	var mockScope;
 3 | 	var compile;
 4 | 	var el;
 5 | 	var dropdownItem = [
 6 | 		"Option0",
 7 | 		"Option1",
 8 | 		"Option2",
 9 | 		"Option3",
10 | 		"Option4",
11 | 		"Option5"
12 | 	];
13 | 
14 | 	beforeEach(angular.mock.module("ng.bs.dropdown"));
15 | 
16 | 	describe("A basic multi-select dropdown test", function(){
17 | 		beforeEach(inject(function($rootScope, $compile){
18 | 			mockScope = $rootScope.$new();
19 | 			compile = $compile;
20 | 			mockScope.data = dropdownItem;
21 | 			//default select value
22 | 			mockScope.selectData = [mockScope.data[3], mockScope.data[0]];
23 | 
24 | 			el = "<div bs-dropdown bs-dropdown-multi bs-dropdown-items='data' ng-model='selectData'></div>";
25 | 			el = $compile(el)(mockScope);
26 | 			mockScope.$digest();
27 | 		}));
28 | 
29 | 		it("the isolateScope in bsDropdown directive should be correct", function(){
30 | 			var isolated = el.isolateScope();
31 | 			var _bsDropdownItems = isolated._bsDropdownItems;
32 | 			expect(_bsDropdownItems).not.toBeNull();
33 | 			expect(_bsDropdownItems).toBeDefined();
34 | 			expect(mockScope.data.length).toBe(_bsDropdownItems.length);		
35 | 			for(var i=0;i<_bsDropdownItems.length;i++){
36 | 				var item = _bsDropdownItems[i];
37 | 				expect(item).toBeDefined();
38 | 				expect(item._k).toBe(i);
39 | 				expect(item.text).toBe(mockScope.data[i]);
40 | 				expect(item.isDivider).toBe(false);
41 | 				expect(item.isDisabled).toBe(false);
42 | 			}
43 | 			expect(isolated.showText).toBeDefined();
44 | 			expect(isolated.showText).toBe(mockScope.selectData.join());
45 | 			expect(isolated.divider).toBeDefined();
46 | 			expect(isolated.divider.length).toBe(0);
47 | 			expect(isolated.disabledItems).toBeDefined();
48 | 			expect(isolated.disabledItems.length).toBe(0);
49 | 			expect(isolated.disabled).toBeDefined();
50 | 			expect(isolated.disabled).toBe(false);
51 | 			expect(isolated.multiSelect).toBeDefined();
52 | 			expect(isolated.multiSelect).toBe(true);
53 | 		});
54 | 
55 | 		it("the display text should be default selected data", function(){
56 | 			expect(el.find("button").text()).toBe(mockScope.selectData.join());
57 | 		});
58 | 
59 | 		it("the item on dropdown should be correct", function(){
60 | 			var itemElms = el.find("li");
61 | 			expect(itemElms.length).toBe(mockScope.data.length);
62 | 			for(var i=0;i<itemElms.length;i++){
63 | 				expect(itemElms.eq(i).find("a").text()).toBe(" "+mockScope.data[i]);
64 | 			}
65 | 		});
66 | 
67 | 		it("the select value should be checked", function(){
68 | 			var itemElms = el.find("li");
69 | 			for(var i=0;i<itemElms.length;i++){
70 | 				itemElms.eq(i).find("a")
71 | 				if(mockScope.selectData.indexOf(mockScope.data[i]) != -1){
72 | 					expect(itemElms.eq(i).find("input").attr("checked")).toBe("checked");
73 | 				}
74 | 			}
75 | 		});
76 | 
77 | 		it("click item should change the value of ngModel", function(){
78 | 			var originSelectData = mockScope.selectData;
79 | 			var itemElms = el.find("li");
80 | 			itemElms.eq(1).find("a").triggerHandler("click");
81 | 			expect(mockScope.selectData.length).toBe(originSelectData.length+1);
82 | 		});
83 | 	});
84 | });


--------------------------------------------------------------------------------
/test/bsDropdown-test.js:
--------------------------------------------------------------------------------
  1 | describe("bsDropdown Tests", function(){
  2 | 	var mockScope;
  3 | 	var compile;
  4 | 	var el;
  5 | 	var dropdownItem = [
  6 | 		"Option0",
  7 | 		"Option1",
  8 | 		"Option2",
  9 | 		"Option3",
 10 | 		"Option4",
 11 | 		"Option5"
 12 | 	];
 13 | 
 14 | 	beforeEach(angular.mock.module("ng.bs.dropdown"));
 15 | 
 16 | 	describe("A basic dropdown test", function(){
 17 | 		beforeEach(inject(function($rootScope, $compile){
 18 | 			mockScope = $rootScope.$new();
 19 | 			compile = $compile;
 20 | 			mockScope.data = dropdownItem;
 21 | 			//default select value
 22 | 			mockScope.selectData = mockScope.data[3];
 23 | 
 24 | 			el = "<div bs-dropdown bs-dropdown-items='data' ng-model='selectData'></div>";
 25 | 			el = $compile(el)(mockScope);
 26 | 			mockScope.$digest();
 27 | 		}));
 28 | 
 29 | 		it("the isolateScope in bsDropdown directive should be correct", function(){
 30 | 			var isolated = el.isolateScope();
 31 | 			var _bsDropdownItems = isolated._bsDropdownItems;
 32 | 			expect(_bsDropdownItems).not.toBeNull();
 33 | 			expect(_bsDropdownItems).toBeDefined();
 34 | 			expect(mockScope.data.length).toBe(_bsDropdownItems.length);		
 35 | 			for(var i=0;i<_bsDropdownItems.length;i++){
 36 | 				var item = _bsDropdownItems[i];
 37 | 				expect(item).toBeDefined();
 38 | 				expect(item._k).toBe(i);
 39 | 				expect(item.text).toBe(mockScope.data[i]);
 40 | 				expect(item.isDivider).toBe(false);
 41 | 				expect(item.isDisabled).toBe(false);
 42 | 			}
 43 | 			expect(isolated.showText).toBeDefined();
 44 | 			expect(isolated.showText).toBe(mockScope.selectData);
 45 | 			expect(isolated.divider).toBeDefined();
 46 | 			expect(isolated.divider.length).toBe(0);
 47 | 			expect(isolated.disabledItems).toBeDefined();
 48 | 			expect(isolated.disabledItems.length).toBe(0);
 49 | 			expect(isolated.disabled).toBeDefined();
 50 | 			expect(isolated.disabled).toBe(false);
 51 | 		});
 52 | 
 53 | 		it("the display text should be default selected data", function(){
 54 | 			expect(el.find("button").text()).toBe(mockScope.selectData);
 55 | 		});
 56 | 
 57 | 		it("the item on dropdown should be correct", function(){
 58 | 			var itemElms = el.find("li");
 59 | 			expect(itemElms.length).toBe(mockScope.data.length);
 60 | 			for(var i=0;i<itemElms.length;i++){
 61 | 				expect(itemElms.eq(i).find("a").text()).toBe(mockScope.data[i]);
 62 | 			}
 63 | 		});
 64 | 
 65 | 		it("click item should change the value of ngModel", function(){
 66 | 			var itemElms = el.find("li");
 67 | 			for(var i=0;i<itemElms.length;i++){
 68 | 				itemElms.eq(i).find("a").triggerHandler("click");
 69 | 				expect(mockScope.selectData).toBe(mockScope.data[i]);
 70 | 			}
 71 | 		});
 72 | 	});
 73 | 
 74 | 	describe("A dropdown with divider test", function(){
 75 | 		var _newDividerPos;
 76 | 		beforeEach(inject(function($rootScope, $compile){
 77 | 			mockScope = $rootScope.$new();
 78 | 			compile = $compile;
 79 | 			mockScope.data = dropdownItem;
 80 | 			//default select value
 81 | 			mockScope.selectData = null;
 82 | 
 83 | 			el = "<div bs-dropdown bs-dropdown-items='data' bs-dropdown-divider='{{[1,3]}}' ng-model='selectData'></div>";
 84 | 			el = $compile(el)(mockScope);
 85 | 			mockScope.$digest();
 86 | 		}));
 87 | 
 88 | 		it("the isolateScope in bsDropdown directive should be correct", function(){
 89 | 			var isolated = el.isolateScope();
 90 | 			expect(isolated.divider).toBeDefined();
 91 | 			expect(isolated.divider.length).toBe(2);
 92 | 
 93 | 			var _bsDropdownItems = isolated._bsDropdownItems;
 94 | 			expect(_bsDropdownItems).not.toBeNull();
 95 | 			expect(_bsDropdownItems).toBeDefined();
 96 | 			expect(mockScope.data.length+isolated.divider.length).toBe(_bsDropdownItems.length);		
 97 | 			
 98 | 			var offset = 0;
 99 | 			_newDividerPos = [];
100 | 			var pos = 1;
101 | 			for(var i=0;i<isolated.divider.length;i++){
102 | 				_newDividerPos.push(isolated.divider[i]+pos);
103 | 				pos++;
104 | 			}
105 | 			for(var i=0;i<_bsDropdownItems.length;i++){
106 | 				var item = _bsDropdownItems[i];
107 | 				expect(item).toBeDefined();
108 | 				expect(item._k).toBe(i);
109 | 				expect(item.isDisabled).toBe(false);
110 | 
111 | 				if(_newDividerPos.indexOf(i) != -1){
112 | 					expect(item.text).toBe(null);
113 | 					expect(item.isDivider).toBe(true);
114 | 					offset++;
115 | 				}else{
116 | 					expect(item.text).toBe(mockScope.data[i-offset]);
117 | 					expect(item.isDivider).toBe(false);
118 | 				}
119 | 			}
120 | 		});
121 | 
122 | 		it("the item on dropdown should be correct", function(){
123 | 			var itemElms = el.find("li");
124 | 			var offset = 0;
125 | 			for(var i=0;i<itemElms.length;i++){
126 | 				if(_newDividerPos.indexOf(i) != -1){
127 | 					offset++;
128 | 					expect(itemElms.eq(i).attr("class").indexOf('divider')).not.toBe(-1);
129 | 				}else{
130 | 					expect(itemElms.eq(i).find("a").text()).toBe(mockScope.data[i-offset]);
131 | 				}
132 | 			}
133 | 		});
134 | 	});
135 | 
136 | 	describe("A dropdown with disabled items test", function(){
137 | 		beforeEach(inject(function($rootScope, $compile){
138 | 			mockScope = $rootScope.$new();
139 | 			compile = $compile;
140 | 			mockScope.data = dropdownItem;
141 | 			//default select value
142 | 			mockScope.selectData = null;
143 | 
144 | 			el = "<div bs-dropdown bs-dropdown-items='data' bs-dropdown-item-disabled='{{[1,3]}}' ng-model='selectData'></div>";
145 | 			el = $compile(el)(mockScope);
146 | 			mockScope.$digest();
147 | 		}));
148 | 
149 | 		it("the isolateScope in bsDropdown directive should be correct", function(){
150 | 			var isolated = el.isolateScope();
151 | 			expect(isolated.disabledItems).toBeDefined();
152 | 			expect(isolated.disabledItems.length).toBe(2);
153 | 
154 | 			var _bsDropdownItems = isolated._bsDropdownItems;
155 | 			expect(_bsDropdownItems).not.toBeNull();
156 | 			expect(_bsDropdownItems).toBeDefined();
157 | 			expect(mockScope.data.length).toBe(_bsDropdownItems.length);		
158 | 			
159 | 			for(var i=0;i<_bsDropdownItems.length;i++){
160 | 				var item = _bsDropdownItems[i];
161 | 				expect(item).toBeDefined();
162 | 				expect(item._k).toBe(i);
163 | 				expect(item.isDivider).toBe(false);
164 | 				expect(item.text).toBe(mockScope.data[i]);
165 | 				if(isolated.disabledItems.indexOf(i) != -1)
166 | 					expect(item.isDisabled).toBe(true);
167 | 				else
168 | 					expect(item.isDisabled).toBe(false);
169 | 			}
170 | 		});
171 | 
172 | 		it("the item on dropdown should be correct", function(){
173 | 			var isolated = el.isolateScope();
174 | 			var itemElms = el.find("li");
175 | 			for(var i=0;i<itemElms.length;i++){
176 | 				if(isolated.disabledItems.indexOf(i) != -1)
177 | 					expect(itemElms.eq(i).attr("class").indexOf('disabled')).not.toBe(-1);
178 | 				expect(itemElms.eq(i).find("a").text()).toBe(mockScope.data[i]);
179 | 			}
180 | 		});
181 | 	});
182 | 
183 | 	describe("A disabled dropdown test", function(){
184 | 		beforeEach(inject(function($rootScope, $compile){
185 | 			mockScope = $rootScope.$new();
186 | 			compile = $compile;
187 | 			mockScope.data = dropdownItem;
188 | 			mockScope.selectData = null;
189 | 
190 | 			el = "<div bs-dropdown bs-dropdown-items='data' bs-dropdown-disabled='true' ng-model='selectData'></div>";
191 | 			el = $compile(el)(mockScope);
192 | 			mockScope.$digest();
193 | 		}));
194 | 
195 | 		it("the dropdown should be desabled", function(){
196 | 			expect(el.find("button").attr("class").indexOf('disabled')).not.toBe(-1);
197 | 		});
198 | 	});
199 | });


--------------------------------------------------------------------------------
/test/karma.conf.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(config) {
 2 |      config.set({
 3 |       basePath: '',
 4 |       frameworks: ['jasmine'],
 5 |       files: [
 6 |         '../bower_components/angular/angular.min.js',
 7 |         '../bower_components/angular-mocks/angular-mocks.js',
 8 |         '../src/bsDropdown.js',
 9 |         './bsDropdown-test.js',
10 |         'bsDropdown-multiselect-test.js'
11 |       ],
12 |       exclude: [
13 |       ],
14 |       preprocessors: {
15 |       },
16 |       reporters: ['progress'],
17 |       port: 9876,
18 |       colors: true,
19 |       logLevel: config.LOG_INFO,
20 |       autoWatch: true,
21 |       browsers: ['Chrome'],
22 |       singleRun: false
23 |      });
24 | 
25 | };


--------------------------------------------------------------------------------