ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / letacommog / crmleta / consumerportal / libraries / angularuiaddons / ui-select-master / examples

<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
  <meta charset="utf-8">
  <title>AngularJS ui-select</title>

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
  <link rel="stylesheet" href="http://fk.github.io/select2-bootstrap-css/css/select2-bootstrap.css">

<script src="../dist/select.js"></script>
  <link rel="stylesheet" href="../dist/select.css">

<p>Selected: {{person.selected.name}}</p>

<form class="form-horizontal">
    <fieldset>
      <legend>ui-select inside a Bootstrap form</legend>

<div class="form-group">
        <label class="col-sm-3 control-label">Default</label>
        <div class="col-sm-6">

<ui-select ng-model="person.selected" theme="select2" class="form-control" title="Choose a person">
            <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-sm-3 control-label">Grouped</label>
        <div class="col-sm-6">

<ui-select ng-model="person.selected" theme="select2" class="form-control" title="Choose a person">
            <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-sm-3 control-label">With a clear button</label>
        <div class="col-sm-6">
          <div class="input-group select2-bootstrap-append">

<ui-select ng-model="person.selected" theme="select2" class="form-control" title="Choose a person">
              <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>

</div>
        </div>
      </div>

<div class="form-group">
        <label class="col-sm-3 control-label">Disabled</label>
        <div class="col-sm-6">

<ui-select ng-model="person.selected" theme="select2" class="form-control" ng-disabled="true" title="Choose a person">
            <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>

</fieldset>
  </form>

</body>
</html>

[+] ..
[-] demo-groupby.html [edit]
[-] demo-bind-to-single-property.html [edit]
[-] demo.js [edit]
[-] demo.html [edit]
[-] demo-bind-to-single-property-async.html [edit]
[-] selectize-bootstrap3.html [edit]
[-] demo-disable-search.html [edit]
[-] demo-event-on-select.html [edit]
[-] demo-tagging.html [edit]
[-] bootstrap.html [edit]
[-] demo-multi-select.html [edit]
[-] select2-bootstrap3.html [edit]