Skip to content

Shad1ks/ng-selectize

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ng-selectize

Description

AngularJS wrapper for Selectize.

Demo

Requirements

Install

  • Manually

Download latest release here.

  • NPM
npm install ss-ng-selectize
  • Bower
bower install ss-ng-selectize

Setup

<link rel="stylesheet" href=".../selectize.default.css">
<!--Need just for option of auto width functionality.-->
<link rel="stylesheet" href=".../src/css/ng-selectize.css">

<script type="text/javascript" src=".../jquery.js"></script>
<script type="text/javascript" src=".../standalone/selectize.js"></script>

<script type="text/javascript" src=".../angular.js"></script>
<script type="text/javascript" src=".../src/js/ng-selectize.js"></script>
angular.module("App", ["ngSelectize"]);

Usage

var ctx = this;

ctx.config = {
  valueField: "id",
  labelField: "text"
}

ctx.options = [
  { id: "1", text: "Option - 1" },
  { id: "2", text: "Option - 2" },
  { id: "3", text: "Option - 3" },
  { id: "4", text: "Option - 4" },
  { id: "5", text: "Option - 5" }
]

ctx.value = null;
<ng-selectize config="ctx.config" options="ctx.options" ng-model="ctx.value"></ng-selectize>

Additional

  • Default options
    In addition to pass options with options attribute you can set them in html.
<ng-selectize ng-model="ctx.value">
    <option value="1">Option - 1</option>
</ng-selectize>
  • Disabled and Required
    Use to set dropdown as disabled or required.
<ng-selectize ng-model="ctx.value" ng-disabled="{expression}" ng-required="{expression}"></ng-selectize>
  • On change
    Simplified method to detect changes.
    • Includes new and old value.
<ng-selectize ng-model="ctx.value" on-change="ctx.onChange(val, oldVal)"></ng-selectize>
  • Multiple
    Use to set dropdown as multiple.
    • Includes remove_button plugin.
<ng-selectize ng-model="ctx.value" is-multiple="true"></ng-selectize>
  • Tag
    Use to add tag functionality.
    • Includes special tag validation function. Accept tag value and return bool. (Optional)
    • Includes ability to change text Add. (Optional)
    • Includes option adding to options list if ng-model has a value but this value not exists in the options list.
    • Includes restore_on_backspace plugin.
<ng-selectize ng-model="ctx.value" is-tag="true" is-tag-valid="ctx.isTagValid" tag-text="Push"></ng-selectize>
  • No default
    By default if no value in ng-model, the value will be set to first option if it exists. Use it to off this functionality.
    • Includes similiar check to off default tag option.
<ng-selectize ng-model="ctx.value" is-no-default="true" is-tag-no-default="true"></ng-selectize>
  • Parse
    By default dropdown set a string typed value to ng-model. Use it to parse a value to int or bool before setting the value.
<ng-selectize ng-model="ctx.value" is-int="true" is-bool="true"></ng-selectize>
  • Auto width
    Use to set auto width for the options block.
    • Need to include styles from css folder.
<ng-selectize ng-model="ctx.value" use-auto-width="true"></ng-selectize>