scania-angular-select2
AngularJS directive for Select2
Scania-angular-select2 directive gives you a customizable select box with support for searching, tagging, ng-model, ng-repeat, native HTML select and option tags, infinite scrolling, and many other highly used options. See select2 API documentationfor the list of options
Demo
Getting Started
Requirements
Scania Corporate UI
Select2 V3.5.2
Underscore
JQuery
Installation
bower install scania-angular-select2
npm install
Usage
Add the following script to your index.html file and you are good to go :
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="bower_components/scania-angular-ui/css/corporate-ui-sc-select.css">
<link rel="stylesheet" href="bower_components/select2/select2.css"/><br/>
<link href="bower_components/scania-angular-ui/css/corporate-ui-sc-select.css">
<link rel="stylesheet" href="node_modules/corporate-ui/dist/css/corporate-ui.css">
<script type="text/javascript" src="bower_components/jquery/jquery.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/scania-angular-ui/src/scania-angular-select2.js"></script>
Don't forget to copy the following images to your app root.
select2.png
select2x2.png
select2-spinner.gif
Next inject the directive into your app
angular.module('yourapp', ['scania.angular.select2']);
Required Atributes
The following attributes are required on a select tag
id="your component id"<br/>
class="sc-multiselect"<br/>
sc-select2 (scania-angular-select2 directive)
A complete example can be found here
Examples
Single select with Auto Tokenization
<input type="text" id="single-select-tagging" style="width: 100%"
data-placeholder="Type to add a tag"
data-create-search-choice="vm.createSearchChoice"
data-item-id="id"
data-label="name"
data="{{vm.items}}"
ng-model="vm.selectedItemForSingleTokkenization"
sc-input-select/>
Single select with default item selected
<select ng-options="item as item.name for item in vm.items track by item.id"
id="my-single3" style="width: 100%"
data-placeholder="Select Item"
ng-model="vm.selectedItem"
data-value="id"
sc-single-select>
</select>
## Single select with a custom container css class
<select id="my-single7" style="width: 100%"
data-placeholder="With custom container css"
data-container-css-class="container-css-class"
sc-single-select>
<option ng-bind="options.placeholder"></option>
<option ng-repeat="item in vm.items" ng-model="item">
{{item.name}}
</option>
</select>
Simple Multiselect
<select id="my-multi1" style="width: 100%" multiple="multiple"
data-placeholder="Select Items"
sc-multi-select>
<option ng-repeat="item in vm.items" ng-selected="item.selected" ng-model="item">
{{item.name}}
</option>
</select>
ng-change
event listener and default selection
Multiselect with <select ng-options="item as item.name for item in vm.items track by item.id"
ng-change="vm.selectionChanged()"
ng-model="vm.selectedItems"
data-value="id"
id="my-multi3" style="width: 100%"
multiple="multiple"
data-placeholder="With ng-chnage"
data-container-css-class="select-all"
sc-multi-select>
</select>