angular-virtual-select v1.2.0

Angular-virtual-select

Select with virtualization that imitates ui-select behavior and uses bootstrap styles

Demo: https://pavelglebov.github.io/angular-virtual-select/

Installing

Dependencies:

• Angular-vs-repeat
• Lodash (Underscore is also valid)

You can also add Bootstrap.css styles that will override angular-virtual-select basic styles

• Bootstrap 3+ (CSS only)

npm install angular-virtual-select --save

Include JS and CSS files:

<!-- Dependencies -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-vs-repeat/dist/angular-vs-repeat.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<!-- End of Dependencies -->

<!-- Angular-virtual-select -->
<script src="node_modules/angular-virtual-select/dist/angular-virtual-select.min.js"></script>
<link href="node_modules/angular-virtual-select/dist/angular-virtual-select.min.css" rel="stylesheet">
<!-- End of Angular-virtual-select -->

Or you can use min file bundled with dependencies:

<script src="node_modules/angular-virtual-select/dist/angular-virtual-select-with-dependecies.min.js"></script>
<link href="node_modules/angular-virtual-select/dist/angular-virtual-select.min.css" rel="stylesheet">

Add module dependency to your AngularJS app:

angular.module('myApp', ['angular-virtual-select']);

Usage

<virtual-select choices-repeat="myApp.list" ng-model="myApp.selected"></virtual-select>

Options

Required Options:

• choices-repeat - Array: Pass an array of options
• ng-model - Array: Rresult will be put here

Additional Options:

• placeholder - String: Placeholder ... placeholder="'Select a User'" ...
• display-property - String: In case you pass array of objects, and want to display on UI a particular field ... display-property="'label'" ...
• core-property - String: In case you pass array of objects, and want to pass to ng-model a particular field ... core-property="'name'" ...
• singleselect - Attribute: Only one option can be selected. If singleselect is not passed, select defaults to multiselect ... singleselect>
• multiselect - Attribute: Enables multiselect, is default ... multiselect>
• limit - Number: Limit of selected options ... limit="3" ...
• filterBy - Object: Provide a set of filters which will be applied on input list. E.g. filter-by="{byAge: 18}"
• selectName - String: Used with Events described below ... select-name="'firstVsSelect'" ...

Events:

• virtualScrollActivate - Event: Triggers particular select opening. Broadcasted from parent.
• vsSpecificOpenStateChange - Event: Tells parent that select open state was changed. Emmitted from virtual-select.

Events could be used to decorate virtual-select into bigger component.

<virtual-select choices-repeat="myApp.list" ng-model="myApp.selected" display-property="'label'" placeholder="'Select a User'" limit="10" multiselect filter-by="{byAge: 18}" select-name="'firstVsSelect'"></virtual-select>

Built With

• Angular-vs-repeat - Virtualization for ng-repeat