| 
 | 1 | +<h3>Basic Header and Footer</h3>  | 
 | 2 | +<button class="btn btn-default btn-xs" ng-click="ctrl.enable()">Enable ui-select</button>  | 
 | 3 | +<button class="btn btn-default btn-xs" ng-click="ctrl.disable()">Disable ui-select</button>  | 
 | 4 | +<button class="btn btn-default btn-xs" ng-click="ctrl.clear()">Clear ng-model</button>  | 
 | 5 | + | 
 | 6 | +<h3>Bootstrap theme <small>(remote data source)</small></h3>  | 
 | 7 | +<p>Selected: {{ctrl.address.selected.formatted_address}}</p>  | 
 | 8 | +<ui-select ng-model="ctrl.address.selected"  | 
 | 9 | +           theme="bootstrap"  | 
 | 10 | +           ng-disabled="ctrl.disabled"  | 
 | 11 | +           reset-search-input="false"  | 
 | 12 | +           style="width: 300px;"  | 
 | 13 | +           title="Choose an address">  | 
 | 14 | +  <ui-select-match placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>  | 
 | 15 | +  <ui-select-header>Header text</ui-select-header>  | 
 | 16 | +  <ui-select-choices repeat="address in ctrl.addresses track by $index"  | 
 | 17 | +                     refresh="ctrl.refreshAddresses($select.search)"  | 
 | 18 | +                     refresh-delay="0">  | 
 | 19 | +    <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>  | 
 | 20 | +  </ui-select-choices>  | 
 | 21 | +  <ui-select-footer>Footer text</ui-select-footer>  | 
 | 22 | +</ui-select>  | 
 | 23 | + | 
 | 24 | +<h3>Select2 theme</h3>  | 
 | 25 | +<p>Selected: {{ctrl.person.selected}}</p>  | 
 | 26 | +<ui-select ng-model="ctrl.person.selected" theme="select2" ng-disabled="ctrl.disabled" style="min-width: 300px;" title="Choose a person">  | 
 | 27 | +  <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>  | 
 | 28 | +  <ui-select-header>Header text</ui-select-header>  | 
 | 29 | +  <ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}">  | 
 | 30 | +    <div ng-bind-html="person.name | highlight: $select.search"></div>  | 
 | 31 | +    <small>  | 
 | 32 | +      email: {{person.email}}  | 
 | 33 | +      age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>  | 
 | 34 | +    </small>  | 
 | 35 | +  </ui-select-choices>  | 
 | 36 | +  <ui-select-footer>Footer text</ui-select-footer>  | 
 | 37 | +</ui-select>  | 
 | 38 | + | 
 | 39 | +<h3>Selectize theme</h3>  | 
 | 40 | +<p>Selected: {{ctrl.country.selected}}</p>  | 
 | 41 | +<ui-select ng-model="ctrl.country.selected" theme="selectize" ng-disabled="ctrl.disabled" style="width: 300px;" title="Choose a country">  | 
 | 42 | +  <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>  | 
 | 43 | +  <ui-select-header>Header text</ui-select-header>  | 
 | 44 | +  <ui-select-choices repeat="country in ctrl.countries | filter: $select.search">  | 
 | 45 | +    <span ng-bind-html="country.name | highlight: $select.search"></span>  | 
 | 46 | +    <small ng-bind-html="country.code | highlight: $select.search"></small>  | 
 | 47 | +  </ui-select-choices>  | 
 | 48 | +  <ui-select-footer>Footer text</ui-select-footer>  | 
 | 49 | +</ui-select>  | 
0 commit comments