angular-ui-select2/docs/index.html

AngularUI - The companion suite for AngularJS

<section id="directives-select2">
	<div class="page-header">
		<h1>Select2</h1>
		<small><a href="http://ivaynberg.github.com/select2/">Select2</a> is inspired by <a href="http://harvesthq.github.com/chosen">Chosen</a></small>
	</div>
	<div class="row">
		<div class="span6">
			<h3>Demo</h3>
			<div class="well">
				<p>Value is: {{select2}} <a ng-click="select2='two'">(choose second)</a></p>
				<select ui-select2 ng-model="select2" data-placeholder="Pick a number">
					<option value=""></option>
					<option value="one">First</option>
					<option value="two">Second</option>
					<option value="three">Third</option>
				</select>
			</div>

			<div class="well">
				<p>Value is: {{select2multiple}} <a ng-click="select2multiple=['two']">(choose second)</a></p>
				<select ui-select2 ng-model="select2multiple" data-placeholder="Pick a number" multiple>
					<option value="one">First</option>
					<option value="two">Second</option>
					<option value="three">Third</option>
				</select>
			</div>
		</div>
		<div class="span6">
			<h3>Options</h3>
			<p>You can pass an object to Select2 as the expression: <code>ui-select2="{allowClear:true}"</code> that will be passed directly to <code>$.fn.select2()</code>. You can read more about the supported list of options and what they do on the <a href="http://ivaynberg.github.com/select2/">Select2 Documentation Page</a>. AngularUI will leverage properties passed to Select2 for any complex behavior, there are no parameters necessary for that are specific to AngularUI.</p>
		</div>
	</div>
	<p class="alert alert-info"><i class="icon-info-sign"></i> <code>ui-select2</code> is incompatible with <code>&lt;select ng-options&gt;</code>. For the best results use <code>&lt;option ng-repeat&gt;</code> instead</p>
	<p class="alert alert-info"><i class="icon-info-sign"></i> In order to properly support the Select2 placeholder, create an empty <code>&lt;option&gt;</code> tag at the top of the <code>&lt;select&gt;</code> and either set a <code>data-placeholder</code> on the select element or pass a <code>placeholder</code> option to Select2.</p>

	<h3>How?</h3>
<pre class="prettyprint linenums" ng-non-bindable>
&lt;p&gt;Value is: {{select2}} &lt;a ng-click=&quot;select2=&#x27;two&#x27;&quot;&gt;(choose second)&lt;/a&gt;&lt;/p&gt;
&lt;select ui-select2 ng-model=&quot;select2&quot;&gt;
&lt;option value=&quot;&quot;&gt;Pick a number&lt;/option&gt;
&lt;option value=&quot;one&quot;&gt;First&lt;/option&gt;
&lt;option value=&quot;two&quot;&gt;Second&lt;/option&gt;
&lt;option value=&quot;three&quot;&gt;Third&lt;/option&gt;
&lt;/select&gt;
</pre>
<p>Or try playing around with this <a href="http://plnkr.co/edit/gist:4279651?p=preview">sandbox demo</a> to see how AJAX works</p>
</section>