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

Commit 7fd77da

Browse files
author
Dean Sofer
committed
Added a bootstrap theme
1 parent 877162e commit 7fd77da

File tree

5 files changed

+104
-1
lines changed

5 files changed

+104
-1
lines changed

‎dist/select.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,8 +235,11 @@ angular.module('ui.select', [])
235235
});
236236

237237
angular.module('ui.select').run(['$templateCache', function ($templateCache) {
238+
$templateCache.put('bootstrap/choices.tpl.html', '<ul class="ui-select-choices ui-select-choices-content dropdown-menu" role="menu" aria-labelledby="dLabel"> <li class="ui-select-choices-row" ng-class="{active: $select.activeIdx==$index}"> <a ng-transclude></a> </li> </ul> ');
239+
$templateCache.put('bootstrap/match.tpl.html', '<a class="btn btn-default ui-select-match" ng-hide="open" ng-class="{\'text-success\': $select.selected==undefined}" ng-click="uiSelectCtrl.activate($event)"> <span ng-hide="$select.selected" class="text-muted">{{placeholder}}</span> <span ng-show="$select.selected" ng-transclude></span> <span class="caret"></span> </a> ');
240+
$templateCache.put('bootstrap/select.tpl.html', '<div class="dropdown" ng-class="{open:open}"> <div class="ui-select-match" ng-click="uiSelectCtrl.activate($event)"></div> <input type="text" class="form-control ui-select-search" autocomplete="off" tabindex="" placeholder="{{placeholder}}" ng-model="$select.search" ng-show="open"> <div class="ui-select-choices"></div> </div> ');
238241
$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> ');
239-
$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> ');
242+
$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> ');
240243
$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> ');
241244
$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> ');
242245
$templateCache.put('selectize/match.tpl.html', '<div ng-hide="open || !$select.selected" class="ui-select-match" ng-transclude></div> ');

‎examples/bootstrap.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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+
<style>
30+
body {
31+
padding: 15px;
32+
}
33+
34+
.selectize-control {
35+
/* Align Selectize with input-group-btn */
36+
top: 2px;
37+
}
38+
39+
.selectize-control > .selectize-dropdown {
40+
top: 34px;
41+
}
42+
43+
/* Reset right rounded corners, see Bootstrap input-groups.less */
44+
.input-group > .selectize-control > .selectize-input {
45+
border-bottom-right-radius: 0;
46+
border-top-right-radius: 0;
47+
}
48+
49+
</style>
50+
</head>
51+
52+
<body ng-controller="MainCtrl">
53+
<script src="demo.js"></script>
54+
55+
<p>Selected: {{person.selected.name}}</p>
56+
57+
<form class="form-horizontal">
58+
<fieldset>
59+
<legend>ui-select inside a Bootstrap form</legend>
60+
61+
<div class="form-group">
62+
<label class="col-sm-3 control-label">Default</label>
63+
<div class="col-sm-6">
64+
65+
<ui-select ng-model="person.selected" theme="/src/bootstrap">
66+
<match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
67+
<choices data="people | filter: $select.search">
68+
<div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
69+
<small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
70+
</choices>
71+
</ui-select>
72+
73+
</div>
74+
</div>
75+
</fieldset>
76+
</form>
77+
78+
</body>
79+
</html>

‎src/bootstrap/choices.tpl.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<ul class="ui-select-choices ui-select-choices-content dropdown-menu" role="menu" aria-labelledby="dLabel">
2+
<li class="ui-select-choices-row" ng-class="{active: $select.activeIdx == $index}">
3+
<a ng-transclude></a>
4+
</li>
5+
</ul>

‎src/bootstrap/match.tpl.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<a class="btn btn-default ui-select-match"
2+
ng-hide="open"
3+
ng-class="{'text-success': $select.selected == undefined}"
4+
ng-click="uiSelectCtrl.activate($event)">
5+
<span ng-hide="$select.selected" class="text-muted">{{placeholder}}</span>
6+
<span ng-show="$select.selected" ng-transclude></span>
7+
<span class="caret"></span>
8+
</a>

‎src/bootstrap/select.tpl.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="dropdown" ng-class="{open:open}">
2+
<div class="ui-select-match"
3+
ng-click="uiSelectCtrl.activate($event)"></div>
4+
<input type="text" class="form-control ui-select-search" autocomplete="off" tabindex="" placeholder="{{placeholder}}"
5+
ng-model="$select.search"
6+
ng-show="open">
7+
<div class="ui-select-choices"></div>
8+
</div>

0 commit comments

Comments
 (0)