Skip to content

Commit 25d355a

Browse files
cdjacksoncdjackson
committed
Hacking!!!
1 parent 287febf commit 25d355a

File tree

5 files changed

+749
-165
lines changed

5 files changed

+749
-165
lines changed

‎examples/newdemo.html

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
<!DOCTYPE html>
2+
<html lang="en" ng-app="demo">
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 also need to include jQuery and ECMAScript 5 shim
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('ui-select-match');
17+
document.createElement('ui-select-choices');
18+
</script>
19+
<![endif]-->
20+
21+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
22+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-sanitize.js"></script>
23+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
24+
25+
<!-- ui-select files -->
26+
<script src="../dist/select.js"></script>
27+
<link rel="stylesheet" href="../dist/select.css">
28+
29+
<style>
30+
body {
31+
padding: 15px;
32+
}
33+
</style>
34+
</head>
35+
36+
<body ng-controller="DemoCtrl">
37+
<script src="newdemo.js"></script>
38+
39+
<p>Selected: {{person.selected.name}}</p>
40+
41+
<form class="form-horizontal">
42+
<fieldset>
43+
<legend>ui-select inside a Bootstrap form</legend>
44+
45+
<div class="form-group">
46+
<label class="col-sm-3 control-label">Default</label>
47+
48+
<div class="col-sm-6">
49+
50+
<ui-select ng-model="person.selected" theme="bootstrap">
51+
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}
52+
</ui-select-match>
53+
<ui-select-choices repeat="item in people | filter: $select.search">
54+
<div ng-bind-html="item.name | highlight: $select.search"></div>
55+
<small ng-bind-html="item.email | highlight: $select.search"></small>
56+
</ui-select-choices>
57+
</ui-select>
58+
</div>
59+
</div>
60+
61+
<div class="form-group">
62+
<label class="col-sm-3 control-label">Search Disabled</label>
63+
64+
<div class="col-sm-6">
65+
66+
<ui-select ng-model="person.selected" theme="bootstrap" search-enabled="false">
67+
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}
68+
</ui-select-match>
69+
<ui-select-choices repeat="item in people">
70+
<div ng-bind-html="item.name"></div>
71+
<small ng-bind-html="item.email"></small>
72+
</ui-select-choices>
73+
</ui-select>
74+
75+
</div>
76+
</div>
77+
78+
<div class="form-group">
79+
<label class="col-sm-3 control-label">Multiple</label>
80+
81+
<div class="col-sm-6">
82+
83+
<ui-select multiple ng-model="person.selected" theme="bootstrap" class="form-control" sortable="false"
84+
close-on-select="false">
85+
<ui-select-match placeholder="Select or search a person in the list...">{{$item.name}}
86+
</ui-select-match>
87+
<ui-select-choices repeat="item in people | filter: $select.search">
88+
<div ng-bind-html="item.name | highlight: $select.search"></div>
89+
<small ng-bind-html="item.email | highlight: $select.search"></small>
90+
</ui-select-choices>
91+
</ui-select>
92+
93+
</div>
94+
</div>
95+
96+
<div class="form-group">
97+
<label class="col-sm-3 control-label">Grouped</label>
98+
99+
<div class="col-sm-6">
100+
101+
<ui-select ng-model="person.selected" theme="bootstrap">
102+
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}
103+
</ui-select-match>
104+
<ui-select-choices group-by="'country'" repeat="item in people | filter: $select.search">
105+
<span ng-bind-html="item.name | highlight: $select.search"></span>
106+
<small ng-bind-html="item.email | highlight: $select.search"></small>
107+
</ui-select-choices>
108+
</ui-select>
109+
110+
</div>
111+
</div>
112+
113+
<div class="form-group">
114+
<label class="col-sm-3 control-label">With a clear button</label>
115+
116+
<div class="col-sm-6">
117+
<div class="input-group">
118+
119+
<ui-select allow-clear ng-model="person.selected" theme="bootstrap">
120+
<ui-select-match placeholder="Select or search a person in the list...">
121+
{{$select.selected.name}}
122+
</ui-select-match>
123+
<ui-select-choices repeat="item in people | filter: $select.search">
124+
<span ng-bind-html="item.name | highlight: $select.search"></span>
125+
<small ng-bind-html="item.email | highlight: $select.search"></small>
126+
</ui-select-choices>
127+
</ui-select>
128+
129+
<span class="input-group-btn">
130+
<button ng-click="person.selected = undefined" class="btn btn-default">
131+
<span class="glyphicon glyphicon-trash"></span>
132+
</button>
133+
</span>
134+
135+
</div>
136+
</div>
137+
</div>
138+
139+
<div class="form-group">
140+
<label class="col-sm-3 control-label">Disabled</label>
141+
142+
<div class="col-sm-6">
143+
<ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="true">
144+
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}
145+
</ui-select-match>
146+
<ui-select-choices repeat="item in people | filter: $select.search">
147+
<div ng-bind-html="item.name | highlight: $select.search"></div>
148+
<small ng-bind-html="item.email | highlight: $select.search"></small>
149+
</ui-select-choices>
150+
</ui-select>
151+
</div>
152+
</div>
153+
154+
<div class="form-group">
155+
<label class="col-sm-3 control-label">Tagging</label>
156+
157+
<div class="col-sm-6">
158+
<ui-select multiple ng-model="multipleDemo.colors2" theme="bootstrap"
159+
ng-disabled="disabled" title="Choose a color"
160+
on-keypress="onKeypress(event)">
161+
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
162+
<ui-select-choices repeat="color in availableColors | filter:$select.search">
163+
{{color}}
164+
</ui-select-choices>
165+
</ui-select>
166+
</div>
167+
</div>
168+
169+
</fieldset>
170+
</form>
171+
172+
</body>
173+
</html>

0 commit comments

Comments
 (0)