nya-bootstrap-selectを使ってみる

nya-bootstrap-selectとは

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

使い方

1.プラグインをインストール

bowerを使用

bower install nya-bootstrap-select --save

ファイルをダウンロード

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が必要

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>

サンプル

その他の使い方

1.複数選択

multiple属性を追加することで複数選択が可能になる。

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>

サンプル

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

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

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>

js

  $scope.options = [{
    name: 'ゴーヤ',
    class: '野菜'
  }, {
    name: 'きゅうり',
    class: '野菜'
  }, {
    name: 'なす',
    class: '野菜'
  }, {
    name: 'もも',
    class: '果物'
  }, {
    name: 'さくらんぼ',
    class: '果物'
  }, {
    name: 'アワビ',
    class: '魚介類'
  }, {
    name: 'マグロ',
    class: '魚介類'
  }]

サンプル

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

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

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>

サンプル

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

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

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>

サンプル

5.optionの絞込機能

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

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>

サンプル

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

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

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>

サンプル