blob: 734486bdb09fb71717179e187b5c4dee4c508257 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
|
<!DOCTYPE html>
<html lang="en" ng-app="ui.select.pages">
<head>
<meta charset="utf-8">
<title>AngularJS ui-select</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.js"></script>
<script src="./assets/app.js" type="text/javascript"></script>
<script src="./assets/plunkr.js" type="text/javascript"></script>
<!-- themes -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<link rel="stylesheet" href="./assets/docs.css" />
</head>
<body>
<header class="navbar navbar-default navbar-fixed-top navbar-inner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#">UI Select</a>
</div>
<nav class="hidden-xs">
<ul class="nav navbar-nav">
<a href="#top" role="button" class="navbar-brand">
UI Select
</a>
<li><a href="#getting_started">Getting started</a></li>
<li><a href="#documenation">Documentation</a></li>
<li><a href="#examples">Examples</a></li>
<!--<li class="dropdown" uib-dropdown>
<a role="button" class="dropdown-toggle" uib-dropdown-toggle>
Previous docs <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="version in oldDocs">
<a ng-href="{{version.url}}">{{version.version}}</a>
</li>
</ul>
</li>-->
</ul>
</nav>
<nav class="visible-xs" uib-collapse="!isCollapsed">
<ul class="nav navbar-nav">
<li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
<li><a href="#directives_small" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
</ul>
</nav>
</div>
</header>
<div class="header-placeholder"></div>
<div role="main">
<header class="bs-header text-center" id="overview">
<div class="container">
<h1>UI Select</h1>
<p>
A native <a href="http://angularjs.org">AngularJS</a> implementation of Select2/Selectize by the
<a href="http://angular-ui.github.io">AngularUI Team</a>
</p>
<p>
<a class="btn btn-outline-inverse btn-lg" href="https://github.com/angular-ui/ui-select"><i class="icon-github"></i>Code on Github</a>
<!--<button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showDownloadModal()">
<i class="glyphicon glyphicon-download-alt"></i> Download <small>(<%= pkg.version%>)</small>
</button>-->
</p>
</div>
<div class="bs-social container">
<ul class="bs-social-buttons">
<li>
<iframe src="//ghbtns.com/github-btn.html?user=angular-ui&repo=ui-select&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</li>
<li>
<iframe src="//ghbtns.com/github-btn.html?user=angular-ui&repo=ui-select&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</li>
<li>
<a href="https://twitter.com/share" class="twitter-share-button"
data-hashtags="angularjs">Tweet</a>
<script>
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = "//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");</script>
</li>
<li>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</li>
</ul>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<section id="getting_started">
<div class="page-header">
<h1>Getting started</h1>
</div>
<h3>Dependencies</h3>
<p>
This repository contains a <strong>native AngularJS</strong> select directive based on
Bootstrap/Select2/Selectize's CSS. As a result no dependency on jQuery or 3rd-Party
JavaScript is required. The only <strong>required</strong> dependencies are:
</p>
<ul>
<li>
<a href="http://angularjs.org" target="_blank">AngularJS</a> (requires AngularJS 1.2.x or higher, tested with 1.5.3).
</li>
<li>
<a href="http://angularjs.org" target="_blank">Angular-Sanitze</a> (the version should match your version of angular.js).
</li>
<li>
The matching CSS for your the theme you wish to use:
<ul>
<li>Bootstrap</li>
<li>Select2</li>
<li>Selectize</li>
</ul>
</li>
</ul>
<h3>Installation</h3>
<h4>Install via npm</h4>
<pre>$ npm install ui-select</pre>
<h4>Install via bower</h4>
<pre>$ bower install angular-ui-select</pre>
<p>
As soon as you've got all the files downloaded and included in your page you just need to declare
a dependency on the <code>ui.select</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
<pre><code>angular.module('myModule', ['ui.select', 'ngSanitize']);</code></pre>
</p>
</section>
<section id="documenation">
<div class="page-header">
<h1>Documentation</h1>
</div>
<h3>Wiki</h3>
For up to date information please refer to the <a href="https://github.com/angular-ui/ui-select/wiki" target="_blank">Wiki</a>
<h3>FAQ</h3>
<p>Please check <a href="https://github.com/angular-ui/ui-select/wiki/FAQs" target="_blank">our FAQ section</a> for common problems / solutions.</p>
</section>
<section id="examples">
<div class="page-header">
<h1>Examples</h1>
</div>
<p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
<!-- INSERT EXAMPLES HERE -->
</section>
</div>
</div>
</div><!-- /.container -->
</div><!-- /.main -->
<footer class="footer">
<div class="container">
<p>Designed and built by all ui-select <a href="https://github.com/angular-ui/ui-select/graphs/contributors" target="_blank">contributors</a>.</p>
<p>Code licensed under <a href="https://github.com/angular-ui/ui-select/blob/master/LICENSE">MIT License</a>.</p>
<p><a href="https://github.com/angular-ui/ui-select/issues?state=open">Issues</a></p>
</div>
</footer>
</body>
</html>
|
