Subversion Repositories Integrator Subversion

<!-- 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">

        <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 bordered" 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}} &lt;{{$item.email}}&gt;</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 -->