├── .editorconfig
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── Gruntfile.js
├── README.md
├── bower.json
├── build
    ├── angular-bootstrap-select.js
    └── angular-bootstrap-select.min.js
├── demo
    ├── index.html
    └── select-demo-app.js
├── docs
    ├── config
    │   ├── index.js
    │   └── templates
    │   │   ├── api
    │   │       └── module.template.html
    │   │   ├── base.template.html
    │   │   └── common.template.html
    └── gulpfile.js
├── gulpfile.js
├── package.json
├── src
    └── angular-bootstrap-select.js
└── test
    ├── karma.conf.js
    └── select.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain consistent
 2 | # coding styles between different editors and IDEs
 3 | # editorconfig.org
 4 | 
 5 | root = true
 6 | 
 7 | [*]
 8 | # Change these settings to your own preference
 9 | indent_style = space
10 | indent_size = 2
11 | # We recommend you to keep these unchanged
12 | end_of_line = lf
13 | charset = utf-8
14 | trim_trailing_whitespace = true
15 | insert_final_newline = true
16 | 
17 | [*.md]
18 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | node_modules
3 | components
4 | bower_components
5 | nbproject
6 | .idea
7 | .tmp
8 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | env: CI=true
 2 | language: node_js
 3 | node_js:
 4 |   - "0.10"
 5 | branches:
 6 |   only:
 7 |     - master
 8 | before_script:
 9 |   - export DISPLAY=:99.0
10 |   - sh -e /etc/init.d/xvfb start
11 |   - npm install --quiet -g bower grunt-cli karma
12 |   - npm install
13 |   - bower install
14 | script:
15 |   - grunt test
16 | notifications:
17 |   email:
18 |     - joaopintoneto@gmail.com
19 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | ## 2015-01-02
 3 | - fix(selectpicker) change value for track by ngOptions only (by João Neto <joaopintoneto@gmail.com>)
 4 | - fix(selectpicker) changed styles to theme attr (by João Neto <joaopintoneto@gmail.com>)
 5 | - feat(selectpicker) added styles interpolation capability (by João Neto <joaopintoneto@gmail.com>)
 6 | - chore(selectpicker) function to refresh with scope.$applyAsync (by João Neto <joaopintoneto@gmail.com>)
 7 | - feat(dropdownClose) Added separated directive to close dropdown (by João Neto <joaopintoneto@gmail.com>)
 8 | 
 9 | ## 2014-11-16
10 | - chore(docs) docs wip (by João Neto <joaopintoneto@gmail.com>)
11 | 
12 | ## 2014-11-15
13 | - chore(gulpfile, package, bower): added gulp tasks and updated packages (by João Neto <joaopintoneto@gmail.com>)
14 | 
15 | ## 2014-11-14
16 | - add support for ng-disabled (issue #13) (by jasonduley <jason.duley@nasa.gov>)
17 | 
18 | ## 2014-11-09
19 | - fix tests (by João Neto <joaopintoneto@gmail.com>)
20 | - Updated README.md (by João Neto <joaopintoneto@gmail.com>)
21 | - fix ngIf and ngRepeat bug (by João Neto <joaopintoneto@gmail.com>)
22 | 
23 | ## 2014-11-08
24 | - fix angularjs and bootstrap-select versions (by João Neto <joaopintoneto@gmail.com>)
25 | 
26 | ## 2014-08-03
27 | - added track by (by João Neto <joaopintoneto@gmail.com>)
28 | 
29 | ## 2014-08-02
30 | - fixed ng-required ref #9 (by João Neto <joaopintoneto@gmail.com>)
31 | 
32 | ## 2014-07-27
33 | - Update angular-bootstrap-select.js (by Aaron Jessen <coding@permagreen.com>)
34 | - Update 'compile' section to work with Angular 1.3.0 (by Aaron Jessen <coding@permagreen.com>)
35 | 
36 | ## 2014-06-24
37 | - updated bower.json dependencies (by João Neto <joaopintoneto@gmail.com>)
38 | 
39 | ## 2014-06-23
40 | - Fixing script path (by Danilo Valente <danilovalente96@gmail.com>)
41 | - Fixing script path (by Danilo Valente <danilovalente96@gmail.com>)
42 | 
43 | ## 2014-06-21
44 | - updated .travis.yml (by João Neto <joaopintoneto@gmail.com>)
45 | - updated .travis.yml (by João Neto <joaopintoneto@gmail.com>)
46 | - updated .travis.yml (by João Neto <joaopintoneto@gmail.com>)
47 | - renamed travis config file (by João Neto <joaopintoneto@gmail.com>)
48 | - updated CHANGELOG.md (by João Neto <joaopintoneto@gmail.com>)
49 | - build (by João Neto <joaopintoneto@gmail.com>)
50 | - added CHANGELOG.md to bower.json ignore (by João Neto <joaopintoneto@gmail.com>)
51 | - added capability to handle ng-options added capability to configure bootstrap select options fix tests (by João Neto <joaopintoneto@gmail.com>)
52 | - updated components (by João Neto <joaopintoneto@gmail.com>)
53 | 
54 | ## 2014-06-17
55 | - build (by João Neto <joaopintoneto@gmail.com>)
56 | - Added tests (by João Neto <joaopintoneto@gmail.com>)
57 | - removed grunt and bower to local dependencies (by João Neto <joaopintoneto@gmail.com>)
58 | - Updated README.md (by João Neto <joaopintoneto@gmail.com>)
59 | 
60 | ## 2014-03-16
61 | - selectpicker now stays in sync with original select's ngModel (by Matt Condon <MattCMultimedia@gmail.com>)
62 | 
63 | ## 2014-02-19
64 | - Update angular-bootstrap-select.js (by Paul Melia <paul_j_melia@hotmail.com>)
65 | 
66 | ## 2013-08-11
67 | - Removed .tmp dir (by João Neto <joaopintoneto@gmail.com>)
68 | - Build (by João Neto <joaopintoneto@gmail.com>)
69 | - Fix demo (by João Neto <joaopintoneto@gmail.com>)
70 | - Beta version (by João Neto <joaopintoneto@gmail.com>)
71 | 
72 | ## 2013-08-10
73 | - Initial commit (by João Neto <joaopintoneto@gmail.com>)
74 | 
75 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (grunt) {
 2 |   var env = process.env.CI ? 'continuous' : 'unit';
 3 | 
 4 |   grunt.loadNpmTasks('grunt-karma');
 5 |   grunt.loadNpmTasks('grunt-contrib-clean');
 6 |   grunt.loadNpmTasks('grunt-contrib-copy');
 7 |   grunt.loadNpmTasks('grunt-contrib-uglify');
 8 | 
 9 |   grunt.initConfig({
10 |     readme: 'README.md',
11 |     pkg: grunt.file.readJSON('package.json'),
12 |     karma: {
13 |       options: {
14 |         configFile: 'test/karma.conf.js'
15 |       },
16 |       unit: {
17 |       },
18 |       continuous: {
19 |         browsers: ['PhantomJS'],
20 |         autoWatch: false,
21 |         singleRun: true
22 |       }
23 |     },
24 |     uglify: {
25 |       build: {
26 |         files: {
27 |           'build/<%= pkg.name %>.min.js': ['src/<%= pkg.name %>.js']
28 |         }
29 |       }
30 |     },
31 |     copy: {
32 |       build: {
33 |         files: [
34 |           { expand: true, flatten: true, src: ['src/**'], dest: 'build/', filter: 'isFile' }
35 |         ]
36 |       },
37 |       demo: {
38 |         options: {
39 |           processContent: (function (content) {
40 |             return grunt.template.process(content);
41 |           })
42 |         },
43 |         files: [
44 |           { src: ['demo/**'], dest: '.tmp/' }
45 |         ]
46 |       }
47 |     },
48 |     clean: {
49 |       build: {
50 |         src: ['build']
51 |       }
52 |     },
53 |   });
54 | 
55 |   grunt.registerTask('test', ['karma:' + env]);
56 |   grunt.registerTask('build', ['clean:build', 'uglify', 'copy:build']);
57 |   grunt.registerTask('default', ['test']);
58 | };
59 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | (DEPRECATED) angular-bootstrap-select
 2 | =====================================
 3 | 
 4 | I decide to unregister this package from the bower, if someone interessed in maintain this with `angular-bootstrap-select` name, that's the chance.
 5 | 
 6 | 
 7 | Directive to wrap [bootstrap-select](http://silviomoreto.github.io/bootstrap-select/). This directive aims to proxy the behavior of the plugin bootstrap-select, in the AngularJS style, see the documentation on the [plugin page](http://silviomoreto.github.io/bootstrap-select/).
 8 | 
 9 | ## Requirements
10 | - ([jQuery](http://jquery.com/))
11 | - ([bootstrap-select](http://silviomoreto.github.io/bootstrap-select/))
12 | - ([AngularJS](http://angularjs.org/))
13 | 
14 | ## Install
15 | ```bash
16 | $ bower install angular-bootstrap-select
17 | ```
18 | 
19 | ## Examples
20 | - ./demo/index.html
21 | - [Live demo](http://joaoneto.github.io/angular-bootstrap-select/)
22 | - [Codepen.io](http://codepen.io/joaoneto/pen/azoEdG)
23 | 
24 | ### Html snippet
25 | 
26 | ```html
27 | <script src="../bower_components/angular-bootstrap-select/build/angular-bootstrap-select.min.js"></script>
28 | 
29 | <select class="selectpicker">
30 |   <option>Mustard</option>
31 |   <option>Ketchup</option>
32 |   <option>Relish</option>
33 | </select>
34 | ```
35 | 
36 | ## Testing
37 | 
38 | ```bash
39 | $ npm install
40 | $ bower install
41 | $ grunt
42 | ```
43 | 
44 | ## License
45 | The MIT License (MIT)
46 | 
47 | Copyright (c) 2014 João Pinto Neto
48 | 
49 | Permission is hereby granted, free of charge, to any person obtaining a copy
50 | of this software and associated documentation files (the "Software"), to deal
51 | in the Software without restriction, including without limitation the rights
52 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
53 | copies of the Software, and to permit persons to whom the Software is
54 | furnished to do so, subject to the following conditions:
55 | 
56 | The above copyright notice and this permission notice shall be included in
57 | all copies or substantial portions of the Software.
58 | 
59 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
60 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
61 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
62 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
63 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
64 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
65 | THE SOFTWARE.
66 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-bootstrap-select",
 3 |   "version": "0.1.0-rc2",
 4 |   "main": "./build/angular-bootstrap-select.js",
 5 |   "description": "Directive to wrap bootstrap-select",
 6 |   "author": "https://github.com/joaoneto/angular-bootstrap-select/graphs/contributors",
 7 |   "homepage": "http://joaoneto.github.io/angular-bootstrap-select/",
 8 |   "license": "MIT",
 9 |   "ignore": [
10 |     "**/.*",
11 |     "docs",
12 |     "node_modules",
13 |     "bower_components",
14 |     "components",
15 |     "test*",
16 |     "demo*",
17 |     "Gruntfile.js",
18 |     "gulpfile.js",
19 |     "package.json",
20 |     "CHANGELOG.md"
21 |   ],
22 |   "dependencies": {
23 |     "angular": "~1.3.0",
24 |     "bootstrap-select": ">=1.6"
25 |   },
26 |   "devDependencies": {
27 |     "bootstrap": ">=3.0.0",
28 |     "angular-mocks": "~1.3.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/build/angular-bootstrap-select.js:
--------------------------------------------------------------------------------
 1 | // supply open and close without load bootstrap.js
 2 | angular.module('angular-bootstrap-select.extra', [])
 3 |   .directive('toggle', function () {
 4 |     return {
 5 |       restrict: 'A',
 6 |       link: function (scope, element, attrs) {
 7 |         // prevent directive from attaching itself to everything that defines a toggle attribute
 8 |         if (!element.hasClass('selectpicker')) {
 9 |           return;
10 |         }
11 |         
12 |         var target = element.parent();
13 |         var toggleFn = function () {
14 |           target.toggleClass('open');
15 |         };
16 |         var hideFn = function () {
17 |           target.removeClass('open');
18 |         };
19 | 
20 |         element.on('click', toggleFn);
21 |         element.next().on('click', hideFn);
22 | 
23 |         scope.$on('$destroy', function () {
24 |           element.off('click', toggleFn);
25 |           element.next().off('click', hideFn);
26 |         });
27 |       }
28 |     };
29 |   });
30 | 
31 | angular.module('angular-bootstrap-select', [])
32 |   .directive('selectpicker', ['$parse', function ($parse) {
33 |     return {
34 |       restrict: 'A',
35 |       require: '?ngModel',
36 |       priority: 10,
37 |       compile: function (tElement, tAttrs, transclude) {
38 |         tElement.selectpicker($parse(tAttrs.selectpicker)());
39 |         tElement.selectpicker('refresh');
40 |         return function (scope, element, attrs, ngModel) {
41 |           if (!ngModel) return;
42 | 
43 |           scope.$watch(attrs.ngModel, function (newVal, oldVal) {
44 |             scope.$evalAsync(function () {
45 |               if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) element.val(newVal);
46 |               element.selectpicker('refresh');
47 |             });
48 |           });
49 | 
50 |           ngModel.$render = function () {
51 |             scope.$evalAsync(function () {
52 |               element.selectpicker('refresh');
53 |             });
54 |           }
55 |         };
56 |       }
57 |         
58 |     };
59 |   }]);
60 | 


--------------------------------------------------------------------------------
/build/angular-bootstrap-select.min.js:
--------------------------------------------------------------------------------
1 | angular.module("angular-bootstrap-select.extra",[]).directive("toggle",function(){return{restrict:"A",link:function(a,b){if(b.hasClass("selectpicker")){var c=b.parent(),d=function(){c.toggleClass("open")},e=function(){c.removeClass("open")};b.on("click",d),b.next().on("click",e),a.$on("$destroy",function(){b.off("click",d),b.next().off("click",e)})}}}}),angular.module("angular-bootstrap-select",[]).directive("selectpicker",["$parse",function(a){return{restrict:"A",require:"?ngModel",priority:10,compile:function(b,c){return b.selectpicker(a(c.selectpicker)()),b.selectpicker("refresh"),function(a,b,c,d){d&&(a.$watch(c.ngModel,function(d){a.$evalAsync(function(){(!c.ngOptions||/track by/.test(c.ngOptions))&&b.val(d),b.selectpicker("refresh")})}),d.$render=function(){a.$evalAsync(function(){b.selectpicker("refresh")})})}}}}]);


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en" ng-app="selectDemoApp" id="top">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 |     <meta name="viewport" content="width=device-width">
  7 |     <title>Angular bootstrap-select</title>
  8 | 
  9 |     <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
 10 |     <link rel="stylesheet" href="../bower_components/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
 11 | </head>
 12 | <body>
 13 |     <div role="main" dropdown-close>
 14 |         <div class="container">
 15 |             <!-- Extras -->
 16 |             <section id="extras" ng-controller="ExtrasCtrl">
 17 |                 <h1>Extras</h1>
 18 |                 <div>
 19 |                     <h3>Not popup without dropdownToggle directive</h3>
 20 |                     <!-- This extra directive provide dropdown open and close without loading bootstrap.js -->
 21 |                     <select selectpicker class="selectpicker">
 22 |                         <option value="">Select one</option>
 23 |                         <option>Mustard</option>
 24 |                         <option>Ketchup</option>
 25 |                         <option>Relish</option>
 26 |                     </select>
 27 | 
 28 |                     <h3>Popup with dropdownToggle directive</h3>
 29 |                     <dropdown-toggle>
 30 |                       <select selectpicker class="selectpicker">
 31 |                           <option value="">Select one</option>
 32 |                           <option>Mustard</option>
 33 |                           <option>Ketchup</option>
 34 |                           <option>Relish</option>
 35 |                       </select>
 36 |                     </dropdown-toggle>
 37 |                 </div>
 38 |             </section>
 39 | 
 40 |             <!-- Simple usage -->
 41 |             <section id="simple-usage" ng-controller="SimpleUsageCtrl" dropdown-toggle>
 42 |                 <h1>Simple usage</h1>
 43 |                 <div>
 44 |                     <h3>Works with simple select</h3>
 45 |                     <div>Model value: <code>{{model || "''"}}</code></div>
 46 |                     <select selectpicker ng-model="model">
 47 |                         <option value="">Select one</option>
 48 |                         <option>Mustard</option>
 49 |                         <option>Ketchup</option>
 50 |                         <option>Relish</option>
 51 |                     </select>
 52 | 
 53 |                     <h3>Works with ngIf</h3>
 54 |                     <p>To work with ngIf, set ng-model to $parent <code>ng-model="$parent.model"</code></p>
 55 |                     <div>Model value: <code>{{model || "''"}}</code></div>
 56 |                     <div>Show/Hide <input type="checkbox" ng-model="selectWithOptionsIsVisible"></div>
 57 | 
 58 |                     <div ng-if="selectWithOptionsIsVisible">
 59 |                         <select id="selectVisible" class="dropup" selectpicker="{}" ng-model="$parent.model">
 60 |                             <option value="">Select one</option>
 61 |                             <option>Mustard</option>
 62 |                             <option>Ketchup</option>
 63 |                             <option>Relish</option>
 64 |                         </select>
 65 |                     </div>
 66 | 
 67 |                     <h3>Works with ngDisable</h3>
 68 |                     <div>Model value: <code>{{model || "''"}}</code></div>
 69 |                     <div>Enabled/Disabled <input type="checkbox" ng-model="selectWithNgDisabled"></div>
 70 | 
 71 |                     <div>
 72 |                         <select id="selectVisible" ng-disabled="selectWithNgDisabled" selectpicker ng-model="model">
 73 |                             <option value="">Select one</option>
 74 |                             <option>Mustard</option>
 75 |                             <option>Ketchup</option>
 76 |                             <option>Relish</option>
 77 |                         </select>
 78 |                     </div>
 79 | 
 80 |                     <h3>Works with optgroup</h3>
 81 |                     <div>Model value: <code>{{model || "''"}}</code></div>
 82 |                     <div>
 83 |                         <select selectpicker ng-model="model">
 84 |                             <option value="">Select one</option>
 85 |                             <optgroup label="Favorite">
 86 |                                 <option>Mustard</option>
 87 |                                 <option>Ketchup</option>
 88 |                             </optgroup>
 89 |                             <optgroup label="Other">
 90 |                                 <option>Relish</option>
 91 |                             </optgroup>
 92 |                         </select>
 93 |                     </div>
 94 | 
 95 |                     <h3>Works with ngOptions</h3>
 96 |                     <div>Model value: <code>{{model || "''"}}</code></div>
 97 |                     <div>Colors: <code>{{colors | json}}</code></div>
 98 |                     <div>
 99 |                         <select selectpicker ng-model="model" ng-options="c as c for c in colors">
100 |                             <option value="">Select one</option>
101 |                         </select>
102 |                     </div>
103 | 
104 |                     <h3>Works with ngRepeat</h3>
105 |                     <p>To work with ngRepeat, set ng-model to $parent <code>ng-model="$parent.model"</code></p>
106 |                     <div ng-repeat="select in repeater">
107 |                         <div>
108 |                             <label>{{select.title}} {{model}}</label>
109 |                             <select selectpicker ng-model="$parent.model" ng-options="c as c for c in colors">
110 |                                 <option value="">Select one</option>
111 |                             </select>
112 |                         </div>
113 |                     </div>
114 |                 </div>
115 |             </section>
116 | 
117 |             <!-- Styles -->
118 |             <section id="simple-usage" ng-controller="StyleCtrl" dropdown-toggle>
119 |                 <h1>Style usage</h1>
120 |                 <div>
121 |                     <h3>Works with selectpicker style option</h3>
122 |                     <p>You can set different Bootstrap classes via the selectpicker style option</p>
123 |                     <select selectpicker="{style:'btn-info'}">
124 |                         <option value="">Select one</option>
125 |                         <option>Mustard</option>
126 |                         <option>Ketchup</option>
127 |                         <option>Relish</option>
128 |                     </select>
129 |                 </div>
130 |                 <div>
131 |                     <h3>Works with data-style</h3>
132 |                     <p>You can set different Bootstrap classes via the data-style attribute</p>
133 |                     <select selectpicker="" sp-theme="btn-{{color}}" ng-model="color">
134 |                         <option value="primary">btn-primary</option>
135 |                         <option value="info">btn-info</option>
136 |                         <option value="success">btn-success</option>
137 |                         <option value="danger">btn-danger</option>
138 |                         <option value="warning">btn-warning</option>
139 |                         <option value="inverse">btn-inverse</option>
140 |                     </select>
141 |                 </div>
142 |                 <div>
143 |                     <h3>Works with option data-content</h3>
144 |                     <select selectpicker="" ng-model="color">
145 |                         <option data-content="<span class='label label-primary'>btn-primary</span>" value="primary">btn-primary</option>
146 |                         <option data-content="<span class='label label-info'>btn-info</span>" value="info">btn-info</option>
147 |                         <option data-content="<span class='label label-success'>btn-success</span>" value="success">btn-success</option>
148 |                         <option data-content="<span class='label label-danger'>btn-danger</span>" value="danger">btn-danger</option>
149 |                         <option data-content="<span class='label label-warning'>btn-warning</span>" value="warning">btn-warning</option>
150 |                         <option data-content="<span class='label label-inverse'>btn-inverse</span>" value="inverse">btn-inverse</option>
151 |                     </select>
152 |                 </div>
153 |                 <div>
154 |                     <h3>Works with option data-icon</h3>
155 |                     <p>TODO: interpolate</p>
156 |                     <select selectpicker="" ng-model="color">
157 |                         <option data-icon="glyphicon glyphicon-search" value="primary">btn-primary</option>
158 |                         <option data-icon="glyphicon glyphicon-thumbs-up" value="info">btn-info</option>
159 |                         <option data-icon="glyphicon glyphicon-bell" value="success">btn-success</option>
160 |                         <option data-icon="glyphicon glyphicon-phone" value="danger">btn-danger</option>
161 |                         <option data-icon="glyphicon glyphicon-globe" value="warning">btn-warning</option>
162 |                         <option data-icon="glyphicon glyphicon-play" value="inverse">btn-inverse</option>
163 |                     </select>
164 |                 </div>
165 |                 <div>
166 |                     <h3>Works with option data-icon and ngOptions</h3>
167 |                     <select selectpicker="">
168 |                       <option value="">Select one</option>
169 |                       <option ng-repeat="i in icons" value="{{i.id}}" data-icon="{{i.icon}}">{{i.title}}</option>
170 |                     </select>
171 |                 </div>
172 |             </section>
173 |         </div>
174 |     </div>
175 | 
176 |     <script src="../bower_components/jquery/dist/jquery.js"></script>
177 |     <script src="../bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script>
178 |     <script src="../bower_components/angular/angular.js"></script>
179 | 
180 |     <script src="../src/angular-bootstrap-select.js"></script>
181 |     <script src="select-demo-app.js"></script>
182 | </body>
183 | </html>
184 | 


--------------------------------------------------------------------------------
/demo/select-demo-app.js:
--------------------------------------------------------------------------------
 1 | angular.module('selectDemoApp', [
 2 |   'angular-bootstrap-select',
 3 |   'angular-bootstrap-select.extra'
 4 | ])
 5 | 
 6 | .controller('ExtrasCtrl', function ($scope, $timeout) {
 7 |   $scope.model = 'Mustard';
 8 | })
 9 | 
10 | .controller('SimpleUsageCtrl', function ($scope, $timeout) {
11 |   $scope.model = 'Mustard';
12 |   $scope.colors = ['Mustard', 'Ketchup', 'Relish'];
13 | 
14 |   $scope.repeater = [
15 |     { title: 'one' },
16 |     { title: 'two' },
17 |     { title: 'three' }
18 |   ];
19 |   $scope.selectWithOptionsIsVisible = true;
20 | })
21 | 
22 | .controller('StyleCtrl', function ($scope, $timeout) {
23 |   $scope.color = 'success';
24 |   $scope.icons = [
25 |     { id: 0, icon: 'glyphicon glyphicon-search', title: 'Search' },
26 |     { id: 1, icon: 'glyphicon glyphicon-headphones', title: 'Headphones' },
27 |     { id: 2, icon: 'glyphicon glyphicon-ok', title: 'Ok' },
28 |     { id: 3, icon: 'glyphicon glyphicon-user', title: 'User' }
29 |   ];
30 | })
31 | 


--------------------------------------------------------------------------------
/docs/config/index.js:
--------------------------------------------------------------------------------
 1 | var path = require('canonical-path');
 2 | var Package = require('dgeni').Package;
 3 | 
 4 | var paths = {
 5 |   src: path.resolve(__dirname, '../../src'),
 6 |   docs: path.resolve(__dirname, '..'),
 7 | };
 8 | 
 9 | var files = {
10 |   scripts: path.join(paths.src, '**', '*.js'),
11 |   exclude_scripts: '',
12 | };
13 | 
14 | module.exports = new Package('angular-bootstrap-select', [
15 |   require('dgeni-packages/ngdoc'),
16 |   require('dgeni-packages/nunjucks'),
17 | ])
18 | 
19 | .factory(function gitData() {
20 |   return {
21 |     version: {
22 |       isSnapshot: true,
23 |       branch: 'master',
24 |       raw: 'v0.0.4',
25 |     },
26 |     versions: ['v0.0.2', 'v0.0.3', 'v0.0.4'],
27 |     info: {
28 |       owner: 'joaoneto',
29 |       repo: 'angular-bootstrap-select',
30 |     }
31 |   };
32 | })
33 | .config(function (templateFinder, renderDocsProcessor, gitData) {
34 |   renderDocsProcessor.extraData.git = gitData;
35 | })
36 | 
37 | .config(function (templateFinder, readFilesProcessor, writeFilesProcessor) {
38 |   readFilesProcessor.basePath = path.resolve(__dirname, '../..');
39 |   readFilesProcessor.sourceFiles = [{
40 |     include: files.scripts,
41 |     basePath: paths.src
42 |   }];
43 |   templateFinder.templateFolders.unshift(path.resolve(__dirname, 'templates'));
44 |   writeFilesProcessor.outputFolder = paths.docs;
45 | });
46 | 


--------------------------------------------------------------------------------
/docs/config/templates/api/module.template.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.template.html" %}
 2 | 
 3 | {% block content %}
 4 | <h1>
 5 |   {% if doc.title %}{$ doc.title | marked $}{% else %}{$ doc.name | code $}{% endif %}
 6 | </h1>
 7 | 
 8 | {$ doc.description | marked $}
 9 | 
10 | {% if doc.name != 'ng' and doc.name != 'auto' %}
11 |   <h2>Installation</h2>
12 | 
13 |   <p>First include <code>angular-bootstrap-select</code> in your HTML:</p>
14 | 
15 |   {% code %}
16 |       <script src="angular.js">
17 |       <script src="angular-bootstrap-select.js">
18 |   {% endcode %}
19 | 
20 |   <p>You can download this file from the following places:</p>
21 |   <ul>
22 |     <li>
23 |       <a href="https://github.com/joaoneto/angular-bootstrap-select/releases">Github</a><br>
24 |       e.g. {$ ("https://github.com/joaoneto/angular-bootstrap-select/archive/vX.Y.Z.zip") | code $}
25 |     </li>
26 |     <li>
27 |       <a href="http://bower.io">Bower</a><br>
28 |       e.g. <code>bower install angular-bootstrap-select@X.Y.Z</code>
29 |     </li>
30 |   </ul>
31 |   <p>where X.Y.Z is the angular-bootstrap-select.js version you are running.</p>
32 |   <p>Then load the module in your application by adding it as a dependent module:</p>
33 |   {% code %}
34 |     angular.module('app', ['{$ doc.name $}']);
35 |   {% endcode %}
36 | 
37 |   <p>With that you&apos;re ready to get started!</p>
38 | {% endif %}
39 | 
40 | <div class="component-breakdown">
41 |   <h2>Module Components</h2>
42 |   {% for componentGroup in doc.componentGroups %}
43 |   <div>
44 |     <h3 class="component-heading" id="{$ componentGroup.groupType | dashCase $}">{$ componentGroup.groupType | title $}</h3>
45 |     <table class="definition-table">
46 |       <tr>
47 |         <th>Name</th>
48 |         <th>Description</th>
49 |       </tr>
50 |       {% for component in componentGroup.components %}
51 |       <tr>
52 |         <td>{$ component.id | link(component.name, component) $}</td>
53 |         <td>{$ component.description | firstParagraph | marked $}</td>
54 |       </tr>
55 |       {% endfor %}
56 |     </table>
57 |   </div>
58 |   {% endfor %}
59 | </div>
60 | 
61 | {% if doc.usage %}
62 |   <h2>Usage</h2>
63 |   {$ doc.usage | marked $}
64 | {% endif %}
65 | 
66 | {% endblock %}
67 | 


--------------------------------------------------------------------------------
/docs/config/templates/base.template.html:
--------------------------------------------------------------------------------
1 | <a href='https://github.com/joaoneto/angular-bootstrap-select/edit/{$ git.version.branch $}/{$ doc.fileInfo.projectRelativePath $}?message=docs({$ (doc.area != "api") and (doc.area + "%2F") or "" $}{$ doc.name $})%3A%20describe%20your%20change...{$ (doc.area == "api") and ("#L" + doc.startingLine) or "" $}' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>
2 | 
3 | {% block content %}
4 | {% endblock %}
5 | 


--------------------------------------------------------------------------------
/docs/config/templates/common.template.html:
--------------------------------------------------------------------------------
 1 | <h1>{{ doc.codeName }} ({{ doc.outputPath }})</h1>
 2 | <p>{{ doc.description }}</p>
 3 | 
 4 | {% if doc.params %}
 5 | <h2>Params</h2>
 6 | <ul>
 7 | {% for param in doc.params %}
 8 | <li>
 9 |   <strong>{{ param.name }}</strong> { {{ param.typeList }} } - {{ param.description }}
10 | </li>
11 | {% endfor %}
12 | </ul>
13 | {% endif %}
14 | 
15 | {% if doc.returns %}
16 | <h2>Returns</h2>
17 | <p>
18 |   { {{ doc.returns.typeList }} } - {{ doc.returns.description }}
19 | </p>
20 | {% endif %}
21 | 


--------------------------------------------------------------------------------
/docs/gulpfile.js:
--------------------------------------------------------------------------------
1 | var path = require('canonical-path');
2 | var Dgeni = require('dgeni');
3 | var gulp = require('gulp');
4 | 
5 | gulp.task('docs', function () {
6 |   var dgeni = new Dgeni([require('./config')]);
7 |   return dgeni.generate();
8 | });
9 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var gulp = require('gulp');
 3 | var connect = require('gulp-connect');
 4 | 
 5 | var paths = {
 6 |   src: 'src',
 7 |   dist: 'dist',
 8 |   demo: 'demo',
 9 |   test: 'test',
10 | };
11 | 
12 | var files = {
13 |   scripts: path.join(paths.src, '**', '*.js'),
14 |   demo: path.join(paths.demo, '**', '*'),
15 | };
16 | 
17 | gulp.task('watch:demo', function () {
18 |   gulp.watch(files.demo, function () {
19 |     gulp.src(files.demo).pipe(connect.reload());
20 |   });
21 | });
22 | 
23 | gulp.task('serve', ['watch:demo'], function () {
24 |   connect.server({ livereload: true });
25 | });
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-bootstrap-select",
 3 |   "version": "0.1.0-rc2",
 4 |   "description": "Directive to wrap bootstrap-select",
 5 |   "devDependencies": {
 6 |     "canonical-path": "0.0.2",
 7 |     "dgeni": "^0.4.1",
 8 |     "dgeni-markdown": "0.0.3",
 9 |     "dgeni-packages": "^0.10.6",
10 |     "grunt-contrib-clean": "~0.5.0",
11 |     "grunt-contrib-copy": "~0.4.1",
12 |     "grunt-contrib-uglify": "~0.2.2",
13 |     "grunt-karma": "~0.4.5",
14 |     "gulp": "^3.8.10",
15 |     "gulp-connect": "^2.2.0",
16 |     "gulp-util": "^3.0.1"
17 |   },
18 |   "scripts": {
19 |     "test": "grunt"
20 |   },
21 |   "keywords": [
22 |     "AngularJS",
23 |     "twitter",
24 |     "bootstrap",
25 |     "select",
26 |     "directive"
27 |   ],
28 |   "author": "João Pinto Neto",
29 |   "license": "MIT"
30 | }
31 | 


--------------------------------------------------------------------------------
/src/angular-bootstrap-select.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | /**
  4 |  * @ngdoc module
  5 |  * @name angular-bootstrap-select.extra
  6 |  * @description
  7 |  * Angular bootstrap-select extra.
  8 |  */
  9 | 
 10 | angular.module('angular-bootstrap-select.extra', [])
 11 |   .directive('dropdownToggle', [dropdownToggleDirective])
 12 |   .directive('dropdownClose', [dropdownCloseDirective]);
 13 | 
 14 | /**
 15 |  * @ngdoc directive
 16 |  * @name dropdownToggle
 17 |  * @restrict ACE
 18 |  *
 19 |  * @description
 20 |  * This extra directive provide dropdown toggle specifically to bootstrap-select without loading bootstrap.js.
 21 |  *
 22 |  * @usage
 23 |  * ```html
 24 |  * <div class="dropdown-toggle">
 25 |  *   <select class="selectpicker">
 26 |  *      <option value="">Select one</option>
 27 |  *      <option>Mustard</option>
 28 |  *      <option>Ketchup</option>
 29 |  *      <option>Relish</option>
 30 |  *   </select>
 31 |  * </div>
 32 |  *
 33 |  * <div dropdown-toggle>
 34 |  *   <select class="selectpicker">
 35 |  *      <option value="">Select one</option>
 36 |  *      <option>Mustard</option>
 37 |  *      <option>Ketchup</option>
 38 |  *      <option>Relish</option>
 39 |  *   </select>
 40 |  * </div>
 41 |  *
 42 |  * <dropdown-toggle>
 43 |  *   <select class="selectpicker">
 44 |  *      <option value="">Select one</option>
 45 |  *      <option>Mustard</option>
 46 |  *      <option>Ketchup</option>
 47 |  *      <option>Relish</option>
 48 |  *   </select>
 49 |  * </dropdown-toggle>
 50 |  * ```
 51 |  */
 52 | 
 53 | function dropdownToggleDirective() {
 54 |   return {
 55 |     restrict: 'ACE',
 56 |     priority: 101,
 57 |     link: function (scope, element, attrs) {
 58 |       var toggleFn = function (e) {
 59 |         var parent = angular.element(this).parent();
 60 | 
 61 |         angular.element('.bootstrap-select.open', element)
 62 |           .not(parent)
 63 |           .removeClass('open');
 64 | 
 65 |         parent.toggleClass('open');
 66 |       };
 67 | 
 68 |       element.on('click.bootstrapSelect', '.dropdown-toggle', toggleFn);
 69 | 
 70 |       scope.$on('$destroy', function () {
 71 |         element.off('.bootstrapSelect');
 72 |       });
 73 |     }
 74 |   };
 75 | }
 76 | 
 77 | /**
 78 |  * @ngdoc directive
 79 |  * @name dropdownClear
 80 |  * @restrict ACE
 81 |  *
 82 |  * @description
 83 |  * This extra directive provide the closing of ALL open dropdowns clicking away
 84 |  *
 85 |  * @usage
 86 |  * ```html
 87 |  * <div class="dropdown-close">
 88 |  *   <select class="selectpicker">
 89 |  *      <option value="">Select one</option>
 90 |  *      <option>Mustard</option>
 91 |  *      <option>Ketchup</option>
 92 |  *      <option>Relish</option>
 93 |  *   </select>
 94 |  * </div>
 95 |  *
 96 |  * <div dropdown-close>
 97 |  *   <select class="selectpicker">
 98 |  *      <option value="">Select one</option>
 99 |  *      <option>Mustard</option>
100 |  *      <option>Ketchup</option>
101 |  *      <option>Relish</option>
102 |  *   </select>
103 |  * </div>
104 |  *
105 |  * <dropdown-close>
106 |  *   <select class="selectpicker">
107 |  *      <option value="">Select one</option>
108 |  *      <option>Mustard</option>
109 |  *      <option>Ketchup</option>
110 |  *      <option>Relish</option>
111 |  *   </select>
112 |  * </dropdown-close>
113 |  * ```
114 |  */
115 | 
116 | function dropdownCloseDirective() {
117 |   return {
118 |     restrict: 'ACE',
119 |     priority: 101,
120 |     link: function (scope, element, attrs) {
121 |       var hideFn = function (e) {
122 |         var parent = e.target.tagName !== 'A' && angular.element(e.target).parents('.bootstrap-select');
123 | 
124 |         angular.element('.bootstrap-select.open', element)
125 |           .not(parent)
126 |           .removeClass('open');
127 |       };
128 | 
129 |       angular.element(document).on('click.bootstrapSelect', hideFn);
130 | 
131 |       scope.$on('$destroy', function () {
132 |         angular.element(document).off('.bootstrapSelect');
133 |       });
134 |     }
135 |   };
136 | }
137 | 
138 | /**
139 |  * @ngdoc module
140 |  * @name angular-bootstrap-select
141 |  * @description
142 |  * Angular bootstrap-select.
143 |  */
144 | 
145 | angular.module('angular-bootstrap-select', [])
146 |   .directive('selectpicker', ['$parse', '$timeout', selectpickerDirective]);
147 | 
148 | /**
149 |  * @ngdoc directive
150 |  * @name selectpicker
151 |  * @restrict A
152 |  *
153 |  * @param {object} selectpicker Directive attribute to configure bootstrap-select, full configurable params can be found in [bootstrap-select docs](http://silviomoreto.github.io/bootstrap-select/).
154 |  * @param {string} ngModel Assignable angular expression to data-bind to.
155 |  *
156 |  * @description
157 |  * The selectpicker directive is used to wrap bootstrap-select.
158 |  *
159 |  * @usage
160 |  * ```html
161 |  * <select selectpicker ng-model="model">
162 |  *   <option value="">Select one</option>
163 |  *   <option>Mustard</option>
164 |  *   <option>Ketchup</option>
165 |  *   <option>Relish</option>
166 |  * </select>
167 |  *
168 |  * <select selectpicker="{dropupAuto:false}" ng-model="model">
169 |  *   <option value="">Select one</option>
170 |  *   <option>Mustard</option>
171 |  *   <option>Ketchup</option>
172 |  *   <option>Relish</option>
173 |  * </select>
174 |  * ```
175 |  */
176 | 
177 | function selectpickerDirective($parse, $timeout) {
178 |   return {
179 |     restrict: 'A',
180 |     priority: 1000,
181 |     link: function (scope, element, attrs) {
182 |       function refresh(newVal) {
183 |         scope.$applyAsync(function () {
184 |           if (attrs.ngOptions && /track by/.test(attrs.ngOptions)) element.val(newVal);
185 |           element.selectpicker('refresh');
186 |         });
187 |       }
188 | 
189 |       attrs.$observe('spTheme', function (val) {
190 |         $timeout(function () {
191 |           element.data('selectpicker').$button.removeClass(function (i, c) {
192 |             return (c.match(/(^|\s)?btn-\S+/g) || []).join(' ');
193 |           });
194 |           element.selectpicker('setStyle', val);
195 |         });
196 |       });
197 | 
198 |       $timeout(function () {
199 |         element.selectpicker($parse(attrs.selectpicker)());
200 |         element.selectpicker('refresh');
201 |       });
202 | 
203 |       if (attrs.ngModel) {
204 |         scope.$watch(attrs.ngModel, refresh, true);
205 |       }
206 | 
207 |       if (attrs.ngDisabled) {
208 |         scope.$watch(attrs.ngDisabled, refresh, true);
209 |       }
210 | 
211 |       scope.$on('$destroy', function () {
212 |         $timeout(function () {
213 |           element.selectpicker('destroy');
214 |         });
215 |       });
216 |     }
217 |   };
218 | }
219 | 


--------------------------------------------------------------------------------
/test/karma.conf.js:
--------------------------------------------------------------------------------
 1 | basePath = '..';
 2 | autoWatch = true;
 3 | singleRun = false;
 4 | files = [
 5 |   JASMINE,
 6 |   JASMINE_ADAPTER,
 7 |   'bower_components/jquery/dist/jquery.js',
 8 |   'bower_components/angular/angular.js',
 9 |   'bower_components/bootstrap-select/dist/js/bootstrap-select.js',
10 |   'bower_components/angular-mocks/angular-mocks.js',
11 |   'src/angular-bootstrap-select.js',
12 |   'test/select.js',
13 | ];
14 | browsers = ['Chrome'];
15 | reporters = ['progress', 'dots'];
16 | colors = true;


--------------------------------------------------------------------------------
/test/select.js:
--------------------------------------------------------------------------------
 1 | describe('selectpicker', function() {
 2 |   beforeEach(module('angular-bootstrap-select'));
 3 | 
 4 |   it('should set to scope the first selectpicker element value', function() {
 5 |     return inject(function ($compile, $rootScope) {
 6 |       var scope = $rootScope.$new();
 7 |       var html = '<select selectpicker ng-model="selected" class="">' +
 8 |                     '<option>Mustard</option>' +
 9 |                     '<option>Ketchup</option>' +
10 |                     '<option>Relish</option>' +
11 |                   '</select>';
12 |       var element = $compile(html)(scope);
13 |       expect(element.val()).toEqual('Mustard');
14 |     });
15 |   });
16 | 
17 |   it('should set to selectpicker element value the scope value', function() {
18 |     return inject(function ($compile, $rootScope, $timeout) {
19 |       var scope = $rootScope.$new();
20 |       var html = '<select selectpicker ng-model="selected" class="">' +
21 |                     '<option>Mustard</option>' +
22 |                     '<option>Ketchup</option>' +
23 |                     '<option>Relish</option>' +
24 |                   '</select>';
25 |       var element = $compile(html)(scope);
26 |       scope.$apply(function () {
27 |         scope.selected = 'Ketchup';
28 |       });
29 |       $timeout.flush(100);
30 |       expect(element.val()).toEqual('Ketchup');
31 |     });
32 |   });
33 | 
34 |   it('should set selectpicker selected option element, changing the model value', function() {
35 |     return inject(function ($compile, $rootScope, $timeout) {
36 |       var scope = $rootScope.$new();
37 |       scope.colors = [{ id: 10, name: 'Red' }, { id: 20, name: 'Green' }, { id: 30, name: 'Blue' }];
38 |       var html = '<select selectpicker ng-model="selected" ng-options="c.name as c.name for c in colors"></select>';
39 |       var element = $compile(html)(scope);
40 |       scope.$apply(function () {
41 |         scope.selected = 'Green';
42 |       });
43 |       $timeout.flush(100);
44 |       expect(element.val()).toEqual('1');
45 |     });
46 |   });
47 | 
48 |   it('should set selectpicker selected option element, changing the model value with options tracked by name', function() {
49 |     return inject(function ($compile, $rootScope, $timeout) {
50 |       var scope = $rootScope.$new();
51 |       scope.colors = [{ id: 10, name: 'Red' }, { id: 20, name: 'Green' }, { id: 30, name: 'Blue' }];
52 |       var html = '<select selectpicker ng-model="selected" ng-options="c.name as c.name for c in colors track by c.name"></select>';
53 |       var element = $compile(html)(scope);
54 |       scope.$apply(function () {
55 |         scope.selected = 'Green';
56 |       });
57 |       $timeout.flush(100);
58 |       expect(element.val()).toEqual('Green');
59 |     });
60 |   });
61 | 
62 |   it('should set model value, changing selectpicker selected element tracked by id', function() {
63 |     return inject(function ($compile, $rootScope, $timeout) {
64 |       var scope = $rootScope.$new();
65 |       scope.colors = [{ id: 10, name: 'Red' }, { id: 20, name: 'Green' }, { id: 30, name: 'Blue' }];
66 |       var html = '<select selectpicker ng-model="selected" ng-options="c.name as c.name for c in colors track by c.id"></select>';
67 |       var element = $compile(html)(scope);
68 |       $timeout.flush(100);
69 |       element.selectpicker('val', 20);
70 |       element.trigger('change');
71 |       expect(scope.selected).toEqual('Green');
72 |     });
73 |   });
74 | 
75 |   it('should set model value, changing selectpicker selected element tracked by name', function() {
76 |     return inject(function ($compile, $rootScope, $timeout) {
77 |       var scope = $rootScope.$new();
78 |       scope.colors = [{ id: 10, name: 'Red' }, { id: 20, name: 'Green' }, { id: 30, name: 'Blue' }];
79 |       var html = '<select selectpicker ng-model="selected" ng-options="c.name as c.name for c in colors track by c.name"></select>';
80 |       var element = $compile(html)(scope);
81 |       $timeout.flush(100);
82 |       element.selectpicker('val', 'Green')
83 |       element.trigger('change');
84 |       expect(scope.selected).toEqual('Green');
85 |     });
86 |   });
87 | 
88 | });
89 | 


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