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

Commit 0913ad0

Browse files
mgcreamgcrea
committed
feat(select): provide $select module
1 parent 40ab18b commit 0913ad0

6 files changed

Lines changed: 729 additions & 1 deletion

File tree

‎src/module.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ angular.module('mgcrea.ngStrap', [
44
'mgcrea.ngStrap.aside',
55
'mgcrea.ngStrap.alert',
66
'mgcrea.ngStrap.button',
7+
'mgcrea.ngStrap.select',
78
'mgcrea.ngStrap.navbar',
89
'mgcrea.ngStrap.tooltip',
910
'mgcrea.ngStrap.popover',
1011
'mgcrea.ngStrap.dropdown',
11-
'mgcrea.ngStrap.select',
1212
'mgcrea.ngStrap.typeahead',
1313
'mgcrea.ngStrap.scrollspy',
1414
'mgcrea.ngStrap.affix',

‎src/select/docs/select.demo.html‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<div class="bs-docs-section" ng-controller="SelectDemoCtrl">
2+
3+
<div class="page-header">
4+
<h1 id="selects">Selects <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/select/select.js" target="_blank">select.js</a>
5+
</h1>
6+
<code>mgcrea.ngStrap.select</code>
7+
</div>
8+
9+
10+
<h2 id="selects-examples">Examples</h2>
11+
<p>Add quick, dynamic select functionality with any form text input.</p>
12+
13+
<div class="callout callout-danger">
14+
<h4>Plugin dependency</h4>
15+
<p>Selects require the <a href="#tooltips">tooltip module</a> and <a href="//github.com/mgcrea/angular-strap/blob/master/src/helpers/parse-options.js" target="_blank">parseOptions helper</a> module to be loaded.</p>
16+
</div>
17+
18+
<h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="select/docs/select.demo.html" data-content-js-url="select/docs/select.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip></a></h3>
19+
<pre class="bs-example-scope">$scope.selectedIcon = "{{selectedIcon}}";
20+
$scope.selectedIcons = "{{selectedIcons}}";
21+
$scope.icons = "{{icons}}";
22+
</pre>
23+
<div class="bs-example" style="padding-bottom: 24px;" append-source>
24+
25+
<label>Single select:&nbsp;</label>
26+
<button type="button" class="btn btn-default" ng-model="selectedIcon" data-html="1" ng-options="icon.value as icon.label for icon in icons" bs-select>
27+
Action <span class="caret"></span>
28+
</button>
29+
<hr>
30+
<label>Multiple select:&nbsp;</label>
31+
<button type="button" class="btn btn-default" ng-model="selectedIcons" data-html="1" data-multiple="1" data-animation="animation-flipX" ng-options="icon.value as icon.label for icon in icons" bs-select>
32+
Action <span class="caret"></span>
33+
</button>
34+
</div>
35+
36+
37+
<h2 id="selects-usage">Usage</h2>
38+
<p>Append a <code>bs-select</code>attribute to any element to enable the directive.</p>
39+
<div class="callout callout-info">
40+
<h4>The module exposes a <code>$select</code>service</h4>
41+
<p>Available for programmatic use (mainly in directives as it requires a DOM element).</p>
42+
<div class="highlight">
43+
<pre>
44+
<code class="javascript" highlight-block>
45+
var mySelect = $select(element, {controller: someModelController});
46+
</code>
47+
</pre>
48+
</div>
49+
</div>
50+
51+
<h3>Options</h3>
52+
<p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
53+
<div class="callout callout-info">
54+
<h4>This module supports exotic placement options!</h4>
55+
<p>You can position your select in corners (such as <code>bottom-left</code>) or any other combination two.</p>
56+
<p>Exotic placement options are not part of the Bootstrap's core, to use them you must use <code>bootstrap-additions.css</code> from the <a href="//github.com/mgcrea/bootstrap-additions" target="_blank">BootstrapAdditions</a> project. This project being not yet fully released, meanwhile, you can use the <a href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css" target="_blank">development snapshot</a> compiled for theses docs.</p>
57+
</div>
58+
<div class="table-responsive">
59+
<table class="table table-bordered table-striped">
60+
<thead>
61+
<tr>
62+
<th style="width: 100px;">Name</th>
63+
<th style="width: 100px;">type</th>
64+
<th style="width: 50px;">default</th>
65+
<th>description</th>
66+
</tr>
67+
</thead>
68+
<tbody>
69+
<tr>
70+
<td>animation</td>
71+
<td>string</td>
72+
<td>animation-fade</td>
73+
<td>apply a CSS animation powered by <code>ngAnimate</code></td>
74+
</tr>
75+
<tr>
76+
<td>placement</td>
77+
<td>string</td>
78+
<td>'bottom-left'</td>
79+
<td>how to position the typeahead - top | bottom | left | right, or any combination like bottom-left.</td>
80+
</tr>
81+
<tr>
82+
<td>trigger</td>
83+
<td>string</td>
84+
<td>'focus'</td>
85+
<td>how typeahead is triggered - click | hover | focus | manual</td>
86+
</tr>
87+
<tr>
88+
<td>html</td>
89+
<td>boolean</td>
90+
<td>false</td>
91+
<td>replace <code>ng-bind</code> with <code>ng-bind-html</code>, requires <code>ngSanitize</code> to be loaded</td>
92+
</tr>
93+
<tr>
94+
<td>delay</td>
95+
<td>number | object</td>
96+
<td>0</td>
97+
<td>
98+
<p>delay showing and hiding the typeahead (ms) - does not apply to manual trigger type</p>
99+
<p>If a number is supplied, delay is applied to both hide/show</p>
100+
<p>Object structure is:
101+
<code>delay: { show: 500, hide: 100 }</code>
102+
</p>
103+
</td>
104+
</tr>
105+
<tr>
106+
<td>container</td>
107+
<td>string | false</td>
108+
<td>false</td>
109+
<td>
110+
<p>Appends the typeahead to a specific element. Example:
111+
<code>container: 'body'</code>. This option is particularly useful in that it allows you to position the typeahead in the flow of the document near the triggering element -&nbsp;which will prevent the typeahead from floating away from the triggering element during a window resize.</p>
112+
</td>
113+
</tr>
114+
<tr>
115+
<td>template</td>
116+
<td>path | id</td>
117+
<td>'$typeahead'</td>
118+
<td>
119+
<p>If provided, overrides the default template, can be either a remote URL or a cached template id.</p>
120+
</td>
121+
</tr>
122+
<tr>
123+
<td>multiple</td>
124+
<td>boolean</td>
125+
<td>false</td>
126+
<td>
127+
<p>Whether multiple selections should be allowed.</p>
128+
</td>
129+
</tr>
130+
<tr>
131+
<td>sort</td>
132+
<td>boolean</td>
133+
<td>true</td>
134+
<td>
135+
<p>Sort the order of the displayed labels.</p>
136+
</td>
137+
</tr>
138+
<tr>
139+
<td>placeholder</td>
140+
<td>string</td>
141+
<td>'Choose among the following...'</td>
142+
<td>
143+
<p>Placeholder text when no value is selected.</p>
144+
</td>
145+
</tr>
146+
</tbody>
147+
</table>
148+
</div>
149+
<div class="callout callout-info">
150+
<h4>Default options</h4>
151+
<p>You can override global defaults for the plugin with <code>$selectProvider.defaults</code></p>
152+
<div class="highlight">
153+
<pre class="bs-exemple-code">
154+
<code class="javascript" highlight-block>
155+
angular.module('myApp')
156+
.config(function($selectProvider) {
157+
angular.extend($selectProvider.defaults, {
158+
animation: 'animation-flipX',
159+
sort: false
160+
});
161+
})
162+
</code>
163+
</pre>
164+
</div>
165+
</div>
166+
167+
</div>

‎src/select/docs/select.demo.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use strict';
2+
3+
angular.module('mgcrea.ngStrapDocs')
4+
5+
.controller('SelectDemoCtrl', function($scope, $http) {
6+
7+
$scope.selectedIcon = '';
8+
$scope.selectedIcons = ['Globe', 'Heart'];
9+
$scope.icons = [
10+
{value: 'Gear', label: '<i class="fa fa-gear"></i> Gear'},
11+
{value: 'Globe', label: '<i class="fa fa-globe"></i> Globe'},
12+
{value: 'Heart', label: '<i class="fa fa-heart"></i> Heart'},
13+
{value: 'Camera', label: '<i class="fa fa-camera"></i> Camera'}
14+
];
15+
16+
});

0 commit comments

Comments
 (0)