<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
UI Select
<small>AngularJS-native version of Select2
</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
<a href="#/dashboard.html">Home
</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="#/ui_select.html">UI Select
</a>
</li>
</ul>
<div class="page-toolbar">
<div class="btn-group pull-right">
<button type="button" class="btn btn-fit-height grey-salt dropdown-toggle" data-toggle="dropdown" dropdown-menu-hover data-delay="1000" data-close-others="true">
Actions
<i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
<i class="icon-user"></i> New User
</a>
</li>
<li>
<a href="#">
<i class="icon-present"></i> New Event
<span class="badge badge-success">4
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-basket"></i> New order
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
<i class="icon-flag"></i> Pending Orders
<span class="badge badge-danger">4
</span>
</a>
</li>
<li>
<a href="#">
<i class="icon-users"></i> Pending Users
<span class="badge badge-warning">12
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN MAIN CONTENT -->
<div class="note note-success note-bordered">
<h3>UI Select
</h3>
<p>
AngularJS-native version of Select2
</p>
<p>
For more info please check the
<a href="https://github.com/angular-ui/ui-select">official github page
</a>
</p>
</div>
<div class="row">
<div class="col-md-12">
<div class="portlet light" ng-controller="UISelectController">
<div class="portlet-title">
<div class="caption font-green-sharp">
<i class="icon-settings font-green-sharp"></i>
<span class="caption-subject bold uppercase">UI Select Demo
</span>
<span class="caption-helper hide"></span>
</div>
<div class="actions">
<a class="btn btn-circle btn-icon-only btn-default" href="#">
<i class="icon-cloud-upload"></i>
</a>
<a class="btn btn-circle btn-icon-only btn-default" href="#">
<i class="icon-wrench"></i>
</a>
</div>
</div>
<div class="portlet-body">
<form class="form-horizontal" role="form">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">Default:
</label>
<div class="col-md-6">
<ui-select ng-model="person.selected" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}
</ui-select-match>
<ui-select-choices repeat="person in people | filter: $select.search">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small ng-bind-html="person.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Grouped:
</label>
<div class="col-md-6">
<ui-select ng-model="person.selected" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}
</ui-select-match>
<ui-select-choices group-by="'group'" repeat="item in people | filter: $select.search">
<span ng-bind-html="item.name | highlight: $select.search"></span>
<small ng-bind-html="item.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">With a clear button:
</label>
<div class="col-md-6">
<div class="input-group">
<ui-select ng-model="person.selected" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}
</ui-select-match>
<ui-select-choices repeat="item in people | filter: $select.search">
<span ng-bind-html="item.name | highlight: $select.search"></span>
<small ng-bind-html="item.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
<span class="input-group-btn">
<button ng-click="person.selected = undefined" class="btn btn-default">
<span class="glyphicon glyphicon-trash"></span>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Disabled:
</label>
<div class="col-md-6">
<ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="true">
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}
</ui-select-match>
<ui-select-choices repeat="item in people | filter: $select.search">
<div ng-bind-html="item.name | highlight: $select.search"></div>
<small ng-bind-html="item.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Multiselect:
</label>
<div class="col-md-6">
<ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled">
<ui-select-match placeholder="Select person...">{{$item.name}}
<{{$item.email}}
></ui-select-match>
<ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
{{person.name}} - {{person.email}}
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.selectedPeople}}
</p>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green">Submit
</button>
<button type="button" class="btn default">Cancel
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END MAIN CONTENT -->
<!-- BEGIN MAIN JS-->
<script></script>
<!-- BEGIN MAIN JS -->