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

Commit 762b821

Browse files
tkrotofftkrotoff
committed
Add more examples + fix the templates to support Bootstrap 3
1 parent 9aa7032 commit 762b821

File tree

9 files changed

+262
-13
lines changed

9 files changed

+262
-13
lines changed

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Starting from Internet Explorer 8 and Firefox 3.6 included.
2727
- Add one of the supported themes:
2828
- Select2 (version ~3.4.5): `<link rel="stylesheet" href=".../select2.css">`
2929
- Selectize (version ~0.8.5): `<link rel="stylesheet" href=".../selectize.*.css">`
30-
- Check the [online demo](http://plnkr.co/edit/GtOOWE?p=preview) to see how to use ui-select
30+
- Check the [examples](https://github.com/angular-ui/ui-select/blob/master/examples) to see how to use ui-select
3131

3232
## Run the tests
3333

@@ -45,4 +45,7 @@ grunt test # Launches Karma
4545

4646
## Contributing
4747

48+
- Run the tests
49+
- Try the [examples](https://github.com/angular-ui/ui-select/blob/master/examples)
50+
4851
When issuing a pull request, please exclude changes in the "dist" folder to avoid merge conflicts.

‎dist/select.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -221,9 +221,9 @@ angular.module('ui.select', [])
221221

222222
angular.module('ui.select').run(['$templateCache', function ($templateCache) {
223223
$templateCache.put('select2/choices.tpl.html', '<ul class="ui-select-choices ui-select-choices-content select2-results"> <li class="ui-select-choices-row" ng-class="{\'select2-highlighted\': $select.activeIdx==$index}"> <div class="select2-result-label" ng-transclude></div> </li> </ul> ');
224-
$templateCache.put('select2/match.tpl.html', '<a class="ui-select-match select2-choice" ng-click="uiSelectCtrl.activate($event)"> <span class="select2-arrow"><b></b></span> <div ng-hide="$select.selected">{{placeholder}}</div> <div ng-transclude></div> </a> ');
225-
$templateCache.put('select2/select.tpl.html', '<div class="select2-container" ng-class="{\'select2-container-active select2-dropdown-open\': open}"> <div class="ui-select-match"></div> <div ng-class="{\'select2-display-none\': !open}" class="select2-drop select2-with-searchbox select2-drop-active"> <div class="select2-search"> <input type="text" class="ui-select-search select2-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ng-model="$select.search"> </div> <div class="ui-select-choices"></div> </div> </div> ');
224+
$templateCache.put('select2/match.tpl.html', '<a class="select2-choice ui-select-match" ng-class="{\'select2-default\': $select.selected == undefined}" ng-click="uiSelectCtrl.activate($event)"> <span ng-hide="$select.selected" class="select2-chosen">{{placeholder}}</span> <span ng-show="$select.selected" class="select2-chosen" ng-transclude></span> <span class="select2-arrow"><b></b></span> </a> ');
225+
$templateCache.put('select2/select.tpl.html', '<div class="select2 select2-container" ng-class="{\'select2-container-active select2-dropdown-open\': open}"> <div class="ui-select-match"></div> <div ng-class="{\'select2-display-none\': !open}" class="select2-drop select2-with-searchbox select2-drop-active"> <div class="select2-search"> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="ui-select-search select2-input" ng-model="$select.search"> </div> <div class="ui-select-choices"></div> </div> </div> ');
226226
$templateCache.put('selectize/choices.tpl.html', '<div ng-show="open" class="ui-select-choices selectize-dropdown single"> <div class="ui-select-choices-content selectize-dropdown-content"> <div class="ui-select-choices-row" ng-class="{\'active\': $select.activeIdx==$index}" ng-click="$select(item)" ng-mouseenter="$select.index=$index"> <div class="option" data-selectable ng-transclude></div> </div> </div> </div> ');
227227
$templateCache.put('selectize/match.tpl.html', '<div ng-hide="open || !$select.selected" class="ui-select-match" ng-transclude></div> ');
228-
$templateCache.put('selectize/select.tpl.html', '<div class="selectize-control single"> <div class="selectize-input" ng-class="{\'input-active dropdown-active\': open}" ng-click="uiSelectCtrl.activate($event)"> <div class="ui-select-match"></div> <input type="text" class="ui-select-search" autocomplete="off" tabindex="" placeholder="{{placeholder}}" ng-model="$select.search" ng-hide="$select.selected && !open"> </div> <div class="ui-select-choices"></div> </div> ');
228+
$templateCache.put('selectize/select.tpl.html', '<div class="selectize-control single"> <div class="selectize-input" ng-class="{\'focus\': open}" ng-click="uiSelectCtrl.activate($event)"> <div class="ui-select-match"></div> <input type="text" class="ui-select-search" autocomplete="off" tabindex="" placeholder="{{placeholder}}" ng-model="$select.search" ng-hide="$select.selected && !open"> </div> <div class="ui-select-choices"></div> </div> ');
229229
}]);

‎examples/demo.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use strict';
2+
3+
angular.module('demo', ['ui.select'])
4+
.config(function(uiSelectConfig) {
5+
// uiSelectConfig.defaultTheme = 'select2';
6+
// uiSelectConfig.defaultTheme = 'selectize';
7+
})
8+
.controller('MainCtrl', ['$scope', function ($scope) {
9+
$scope.person = {};
10+
$scope.people = [
11+
{ name: 'Wladimir Coka', email: '[email protected]' },
12+
{ name: 'Samantha Smith', email: '[email protected]' },
13+
{ name: 'Estefanía Smith', email: '[email protected]' },
14+
{ name: 'Natasha Jones', email: '[email protected]' },
15+
{ name: 'Nicole Smith', email: '[email protected]' },
16+
{ name: 'Adrian Jones', email: '[email protected]' },
17+
];
18+
}]
19+
);

‎examples/select2-bootstrap3.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="demo" xmlns="http://www.w3.org/1999/html">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularJS ui-select</title>
6+
7+
<!--
8+
IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
9+
For Firefox 3.6, you will need to include jQuery
10+
-->
11+
<!--[if lt IE 9]>
12+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
13+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
14+
<script>
15+
document.createElement('ui-select');
16+
document.createElement('match');
17+
document.createElement('choices');
18+
</script>
19+
<![endif]-->
20+
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
22+
23+
<!-- ui-select files -->
24+
<script src="../dist/select.js"></script>
25+
<link rel="stylesheet" href="../dist/select.css">
26+
27+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
28+
29+
<!--
30+
Select2 theme
31+
Bootstrap 3 theme from http://fk.github.io/select2-bootstrap-css/
32+
GitHub project: https://github.com/fk/select2-bootstrap-css
33+
-->
34+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
35+
<link rel="stylesheet" href="http://fk.github.io/select2-bootstrap-css/css/select2-bootstrap.css">
36+
37+
<style>
38+
body {
39+
padding: 15px;
40+
}
41+
</style>
42+
</head>
43+
44+
<body ng-controller="MainCtrl">
45+
<script src="demo.js"></script>
46+
47+
<p>Selected: {{person.selected.name}}</p>
48+
49+
<form class="form-horizontal">
50+
<fieldset>
51+
<legend>ui-select inside a Bootstrap form</legend>
52+
53+
<div class="form-group">
54+
<label class="col-sm-3 control-label">Default</label>
55+
<div class="col-sm-6">
56+
57+
<ui-select ng-model="person.selected" theme="select2" class="form-control">
58+
<match placeholder="Pick one...">{{$select.selected.name}}</match>
59+
<choices data="people | filter: $select.search">
60+
<div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
61+
<small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
62+
</choices>
63+
</ui-select>
64+
65+
</div>
66+
</div>
67+
68+
<div class="form-group">
69+
<label class="col-sm-3 control-label">With a clear button</label>
70+
<div class="col-sm-6">
71+
<div class="input-group select2-bootstrap-append">
72+
73+
<ui-select ng-model="person.selected" theme="select2" class="form-control">
74+
<match placeholder="Pick one...">{{$select.selected.name}}</match>
75+
<choices data="people | filter: $select.search">
76+
<span ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></span>
77+
<small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
78+
</choices>
79+
</ui-select>
80+
81+
<span class="input-group-btn">
82+
<button ng-click="person.selected = undefined" class="btn btn-default">
83+
<span class="glyphicon glyphicon-trash"></span>
84+
</button>
85+
</span>
86+
87+
</div>
88+
</div>
89+
</div>
90+
91+
</fieldset>
92+
</form>
93+
94+
</body>
95+
</html>

‎examples/selectize-bootstrap3.html

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="demo" xmlns="http://www.w3.org/1999/html">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AngularJS ui-select</title>
6+
7+
<!--
8+
IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
9+
For Firefox 3.6, you will need to include jQuery
10+
-->
11+
<!--[if lt IE 9]>
12+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
13+
<script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
14+
<script>
15+
document.createElement('ui-select');
16+
document.createElement('match');
17+
document.createElement('choices');
18+
</script>
19+
<![endif]-->
20+
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
22+
23+
<!-- ui-select files -->
24+
<script src="../dist/select.js"></script>
25+
<link rel="stylesheet" href="../dist/select.css">
26+
27+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
28+
29+
<!--
30+
Selectize theme
31+
Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
32+
-->
33+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css">
34+
35+
<style>
36+
body {
37+
padding: 15px;
38+
}
39+
40+
.selectize-dropdown {
41+
width: 100%;
42+
top: 34px;
43+
}
44+
45+
.selectize-control {
46+
/* Selectize is positionned too high */
47+
top: 2px;
48+
}
49+
50+
/**
51+
* Reset right rounded corners
52+
* See Bootstrap input-groups.less
53+
*/
54+
.input-group > .selectize-control > .selectize-input {
55+
border-bottom-right-radius: 0;
56+
border-top-right-radius: 0;
57+
}
58+
59+
</style>
60+
</head>
61+
62+
<body ng-controller="MainCtrl">
63+
<script src="demo.js"></script>
64+
65+
<p>Selected: {{person.selected.name}}</p>
66+
67+
<form class="form-horizontal">
68+
<fieldset>
69+
<legend>ui-select inside a Bootstrap form</legend>
70+
71+
<div class="form-group">
72+
<label class="col-sm-3 control-label">Default</label>
73+
<div class="col-sm-6">
74+
75+
<ui-select ng-model="person.selected" theme="selectize">
76+
<match placeholder="Pick one...">{{$select.selected.name}}</match>
77+
<choices data="people | filter: $select.search">
78+
<div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
79+
<small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
80+
</choices>
81+
</ui-select>
82+
83+
</div>
84+
</div>
85+
86+
<div class="form-group">
87+
<label class="col-sm-3 control-label">With a clear button</label>
88+
<div class="col-sm-6">
89+
<div class="input-group">
90+
91+
<ui-select ng-model="person.selected" theme="selectize">
92+
<match placeholder="Pick one...">{{$select.selected.name}}</match>
93+
<choices data="people | filter: $select.search">
94+
<span ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></span>
95+
<small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
96+
</choices>
97+
</ui-select>
98+
99+
<span class="input-group-btn">
100+
<button ng-click="person.selected = undefined" class="btn btn-default">
101+
<span class="glyphicon glyphicon-trash"></span>
102+
</button>
103+
</span>
104+
105+
</div>
106+
</div>
107+
</div>
108+
109+
</fieldset>
110+
</form>
111+
112+
</body>
113+
</html>

‎src/select2/match.tpl.html

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1-
<a class="ui-select-match select2-choice" ng-click="uiSelectCtrl.activate($event)">
1+
<!--
2+
select2-choice needs to be before ui-select-match
3+
otherwise CSS rules from https://github.com/fk/select2-bootstrap-css
4+
do not work: [class^="select2-choice"]
5+
-->
6+
<a class="select2-choice ui-select-match"
7+
ng-class="{'select2-default': $select.selected == undefined}"
8+
ng-click="uiSelectCtrl.activate($event)">
9+
<span ng-hide="$select.selected" class="select2-chosen">{{placeholder}}</span>
10+
<span ng-show="$select.selected" class="select2-chosen" ng-transclude></span>
211
<span class="select2-arrow"><b></b></span>
3-
<div ng-hide="$select.selected">{{placeholder}}</div>
4-
<div ng-transclude></div>
512
</a>

‎src/select2/select.tpl.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
<div class="select2-container" ng-class="{'select2-container-active select2-dropdown-open': open}">
1+
<div class="select2 select2-container"
2+
ng-class="{'select2-container-active select2-dropdown-open': open}">
23
<div class="ui-select-match"></div>
3-
<div ng-class="{'select2-display-none': !open}" class="select2-drop select2-with-searchbox select2-drop-active">
4+
<div ng-class="{'select2-display-none': !open}"
5+
class="select2-drop select2-with-searchbox select2-drop-active">
46
<div class="select2-search">
5-
<input type="text" class="ui-select-search select2-input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" ng-model="$select.search">
7+
<input type="text"
8+
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
9+
class="ui-select-search select2-input"
10+
ng-model="$select.search">
611
</div>
712
<div class="ui-select-choices"></div>
813
</div>

‎src/selectize/choices.tpl.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<div ng-show="open" class="ui-select-choices selectize-dropdown single">
22
<div class="ui-select-choices-content selectize-dropdown-content">
3-
<div class="ui-select-choices-row" ng-class="{'active': $select.activeIdx == $index}" ng-click="$select(item)" ng-mouseenter="$select.index = $index">
3+
<div class="ui-select-choices-row"
4+
ng-class="{'active': $select.activeIdx == $index}"
5+
ng-click="$select(item)"
6+
ng-mouseenter="$select.index = $index">
47
<div class="option" data-selectable ng-transclude></div>
58
</div>
69
</div>

‎src/selectize/select.tpl.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
<div class="selectize-control single">
2-
<div class="selectize-input" ng-class="{'input-active dropdown-active': open}" ng-click="uiSelectCtrl.activate($event)">
2+
<div class="selectize-input"
3+
ng-class="{'focus': open}"
4+
ng-click="uiSelectCtrl.activate($event)">
35
<div class="ui-select-match"></div>
4-
<input type="text" class="ui-select-search" autocomplete="off" tabindex="" placeholder="{{placeholder}}" ng-model="$select.search" ng-hide="$select.selected && !open">
6+
<input type="text" class="ui-select-search" autocomplete="off" tabindex="" placeholder="{{placeholder}}"
7+
ng-model="$select.search"
8+
ng-hide="$select.selected && !open">
59
</div>
610
<div class="ui-select-choices"></div>
711
</div>

0 commit comments

Comments
 (0)