nya-bootstrap-select

An angular wrapper for Bootstrap-select with dynamic loading options support

View on Github

Dynamic Examples

Track by

Track by is nothing different with ng-repeat

You have select {{dynModel2}}

options4 is {{options4}}

  1. {{option.name}}

Group Options

If you want show grouped options. we assume you have an property which being used to group by. add group by property after the collection in your nya-bs-option statement

add <span class="dropdown-header">{{$group}}</span> before the <a> element

You have select {{dynModel3}}

options4 is {{options4}}

  1. {{$group}} {{option.name}}

Object Collection

Like ng-repeat, object collection is also supported

You have select {{dynModel4}}

options4 is {{options5}}

  1. {{$group}} {{key}}

Bootstrap-select Features

Features borrowed from Bootstrap-select

Color Class

set btn-primary, btn-success, btn-info, btn-warning, btn-danger to nya-bs-select

  1. Alpha
  2. Bravo
  3. Charlie
  1. Alpha
  2. Bravo
  3. Charlie
  1. Alpha
  2. Bravo
  3. Charlie
  1. Alpha
  2. Bravo
  3. Charlie
  1. Alpha
  2. Bravo
  3. Charlie

Size Button

set btn-lg, btn-sm, btn-xs to nya-bs-select

Note: You shouldn't use these classes with form-control class

  1. Alpha
  2. Bravo
  3. Charlie
  1. Alpha
  2. Bravo
  3. Charlie
  1. Alpha
  2. Bravo
  3. Charlie

Live Search

Add data-live-search="true" in nya-bs-select directive to add live search support

  1. Alpha
  2. Bravo
  3. Charlie

Alternate selection display

You can set title attribute on each nya-bs-option as an alternative to display when an option is selected.

  1. Alpha
  2. Bravo
  3. Charlie

default selection display

To display an default information when nothing is selected. just set title attribute in nya-bs-select directive.
Note: This only works on multiple nya-bs-select. For single nyab-bs-selectYou should give your model an default value to avoid the default text to display

  1. Alpha
  2. Bravo
  3. Charlie

selection display format

Using the data-selected-text-format attribute on an multiple nya-bs-select you can specify how the selection is displayed.

Show Option Tick

This feature is implemented by yourself. You don't need add show-tick class to nya-bs-select. you just need to add the tick to each nya-bs-option

For example, if you want use Bootstrap Glyph. You need to add <span class="glyphicon glyphicon-ok check-mark"></span> following the text content of a nya-bs-option as a child of <a></a>

If you want to use glyph in font-awesome, you can replace the glyphicon with font-awesome class, but keep the check-mark.

      <ol class="nya-bs-select" ng-model="model2">
        <li nya-bs-option="option in option1">
          <a>
            {{option}}
            <span class="glyphicon glyphicon-ok check-mark"></span>
          </a>
        </li>
      </ol>
    

Show Menu Arrow

Just add show-menu-arrow class to nya-bs-select

  1. {{option}}

Other styles feature

Thanks to the structure of nya-bs-select. you can easy control the look of an option or the width of the directive

Change any option styles as you like

  1. {{option}}

Add col-lg-*, col-md-* or other grid column class to control the width of the directive

  1. {{option}}
  1. {{option}}
  1. {{option}}

Disable dropdown

set size to an number, which will limit the dropdown menu size to limit number of element. the default value is 'auto'

  1. Alpha
  2. Bravo
  3. Charlie

Disable An Option

Add disabled class to any nya-bs-option you want disabled

  1. Alpha
  2. Bravo
  3. Charlie

Addition Note: Unlike Bootstrap-select, setting disabled attribute on optgroup to disable entire group options is not supported because we don't have optgroup

Divider

Add an <li> element without nya-bs-option attribute and class but with divider class in your option list

  1. Alpha
  2. Bravo
  3. Charlie
  4. Delta

Subtext

Add a subtext on an nya-bs-option is very straightforward because you have full control what you want to display

  1. {{option}} option {{$index}}
  1. {{option}} option {{$index}}
      
      <!-- You can put your subtext with any style inside the first child element of <a> -->
      
      <ol class="nya-bs-select" ng-model="model2">
        <li nya-bs-option="option in option1">
          <a>
            
              <span>
                {{option}}
                <small>option {{$index}}</small>
              </span>
            
            <span class="glyphicon glyphicon-ok check-mark"></span>
          </a>
        </li>
      </ol>

      
      <!-- You can also put your subtext with any style aside the first child element of <a>. This format will
        lead the subtext not shown in button. Note: you still need to wrap your option text with <span> or other inline tag
      -->
      
      <ol class="nya-bs-select" ng-model="model2">
        <li nya-bs-option="option in option1">
          <a>
            
              <span>
              {{option}}
              </span>
              <small>option {{$index}}</small>
            
            <span class="glyphicon glyphicon-ok check-mark"></span>
          </a>
        </li>
      </ol>
    

Custom option content

Custom option content is nothing different with subtext.

  1. Alpha
  2. Bravo
  3. Charlie
  1. Euro Dollar
  2. US Dollar
  3. Great Britain Pound

Dropdown Size

set size to an number, which will limit the dropdown menu size to limit number of element. the default value is 'auto'

  1. Alpha
  2. Bravo
  3. Charlie
  4. Delta
  5. Echo
  6. Fox
  7. Golf
  8. Hotel
  9. India
  10. Juliet

ngSwitch

for test

  1. {{option}}

condition2