nya-bootstrap-selectを使ってみる

##nya-bootstrap-selectとは
angularJSを使用して、ちょっと便利なselectboxを実装できるプラグインです。

https://github.com/lordfriend/nya-bootstrap-select

##使い方
###1.プラグインをインストール
#####bowerを使用
`bower install nya-bootstrap-select --save`
#####ファイルをダウンロード
https://github.com/lordfriend/nya-bootstrap-select/releases

###2.js、cssファイルを読み込む

```
<script src="XXX/bower_components/nya-bootstrap-select/dist/css/nya-bs-select.css"></script>
<script src="XXX/bower_components/nya-bootstrap-select/tree/master/dist/js/nya-bs-select.js"></script>
```

###3.モジュールを追加
`angular.module('App', ['nya.bootstrap.select'])`

###4. directiveを追加
**nya-bs-select**と、**nya-bs-option**の２つのdirectiveが必要

```lang:html
<ol class="nya-bs-select" ng-model="myModel">
    <li value="alpha" class="nya-bs-option">
        <a>
            Alpha
        </a>
    </li>
    <li value="beta" class="nya-bs-option">
        <a>
            Beta
        </a>
    </li>
    <li value="charlie" class="nya-bs-option">
        <a>
            Charlie
        </a>
    </li>
</ol>
```
<a href="http://codepen.io/satofaction/pen/WvgMLz" target="_brank">サンプル</a>

##その他の使い方
###1.複数選択
**multiple**属性を追加することで複数選択が可能になる。

```lang:html
<ol class="nya-bs-select" ng-model="myModel" multiple>
    <li value="alpha" class="nya-bs-option">
        <a>
            Alpha
        </a>
    </li>
    <li value="beta" class="nya-bs-option">
        <a>
            Beta
        </a>
    </li>
    <li value="charlie" class="nya-bs-option">
        <a>
            Charlie
        </a>
    </li>
</ol>
```
<a href="http://codepen.io/satofaction/pen/yNxjeO" target="_brank">サンプル</a>

###2.オプションをグルーピングする

**group by option.XXXX**の属性でオプションをグルーピングする。
下記の場合はclassというkeyでグルーピング。

```lang:html
  <ol class="nya-bs-select" ng-model="model">
    <li nya-bs-option="option in options group by option.class">
      <span class="dropdown-header">{{$group}}</span>
     <a>
      {{option}}
        <span class="glyphicon glyphicon-ok check-mark"></span>
     </a>
    </li>
  </ol>
```

```lang:js
  $scope.options = [{
    name: 'ゴーヤ',
    class: '野菜'
  }, {
    name: 'きゅうり',
    class: '野菜'
  }, {
    name: 'なす',
    class: '野菜'
  }, {
    name: 'もも',
    class: '果物'
  }, {
    name: 'さくらんぼ',
    class: '果物'
  }, {
    name: 'アワビ',
    class: '魚介類'
  }, {
    name: 'マグロ',
    class: '魚介類'
  }]
```
<a href="http://codepen.io/satofaction/pen/LVJmZd?editors=101" target="_brank">サンプル</a>

###3.グリットシステムが使える？？

bootstrapのグリットシステム(**col-sm-4**とか)がつかえますが、これはbootstrapが入っているから当たり前なのかな・・・


```lang:html
  <ol class="nya-bs-select col-sm-4" ng-model="model">
    <li nya-bs-option="option in options">
     <a>
      {{option}}
        <span class="glyphicon glyphicon-ok check-mark"></span>
     </a>
    </li>
  </ol>
    <ol class="nya-bs-select col-sm-2" ng-model="model2">
    <li nya-bs-option="option in options2">
     <a>
      {{option}}
        <span class="glyphicon glyphicon-ok check-mark"></span>
     </a>
    </li>
  </ol>
```

<a href="http://codepen.io/satofaction/pen/xGajrY?editors=101" target="_brank">サンプル</a>

###4.modelがブランク時の表示

modelの値がブランクの場合、タイトルを設定できる。

```lang:html
  <ol class="nya-bs-select" ng-model="model" title="選択してね">
    <li nya-bs-option="option in options">
     <a>
      {{option}}
        <span class="glyphicon glyphicon-ok check-mark"></span>
     </a>
    </li>
  </ol>
```

<a href="http://codepen.io/satofaction/pen/qdMYVK?editors=101" target="_brank">サンプル</a>

###5.optionの絞込機能

**data-live-search="true"**属性を追加で、optionの絞込検索機能を簡単に追加できる。

```lang:html
  <ol class="nya-bs-select" ng-model="model" data-live-search="true">
    <li nya-bs-option="option in options">
      <a>
        {{ option }}
        
      </a>
    </li>
  </ol>
```

<a href="http://codepen.io/satofaction/pen/EjerWG?editors=101" target="_brank">サンプル</a>


###6.選択項目にチェックマークを表示

**check-mark"**classをspanにつけると、選択項目にチェックマークを表示することができる。

```lang:html
  <ol class="nya-bs-select" ng-model="model" data-live-search="true">
    <li nya-bs-option="option in options">
      <a>
        {{ option }}
        <span class="glyphicon glyphicon-pushpin check-mark"></span>
      </a>
    </li>
  </ol>
```

<a href="http://codepen.io/satofaction/pen/waENeJ?editors=101" target="_brank">サンプル</a>