Skip to content

Selectize directive for AngularJS with two-way bindings for both values and options

License

Notifications You must be signed in to change notification settings

mavencare/selectize-ng

 
 

Repository files navigation

Selectize-ng

Selectize.js directive for AngularJS with two-way bindings for both values and options.

Requirements

  • AngularJS
  • selectize.js
  • jQuery (required by selectize)

Installation

You can get it from Bower

bower install selectize-ng

Load the assets into your application:

<link rel="stylesheet" href="bower_components/selectize-ng/dist/standalone/selectize.css"/>
<script type="text/javascript" src="bower_components/selectize-ng/dist/standalone/selectize-ng.min.js"></script>

Or if you want to use your own copy of selectize.js:

<link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.css"/>
<script type="text/javascript" src="bower_components/selectize/dist/js/standalone/selectize.min.js"></script>
<script type="text/javascript" src="bower_components/selectize-ng/dist/selectize-ng.min.js"></script>

Add the module as a dependency to your angular app:

angular.module('myApp', ['selectize-ng'])

Usage

For tagging, use an <input> element:

<input type="text" selectize="config" options="suggestions" ng-model="selected"/>

And for an auto-suggesting single-value dropdown, use a <select>:

<select selectize="config" options="suggestions" ng-model="selected"></select>

config in the above examples are selectize config objects as documented here.

suggestion is an array of objects to use as items to choose from. By default the object need to be in the form { value: 1, text: 'Hello' }, but this can be configured using the valueField and labelField config directives;

Development

I use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:

npm install -g grunt-cli
npm install && bower install
grunt watch

About

Selectize directive for AngularJS with two-way bindings for both values and options

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%