Skip to content

AngularJS directive providing text input with searchable dropdown list.

License

Notifications You must be signed in to change notification settings

okamgnienie/ng-datalist

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

ngDatalist

AngularJS directive providing text input with searchable dropdown list.

Live demo

link

Features

  • One-file directive, easy to integrate with module bundlers such as webpack, gulp etc.
  • Searchable dropdown list.
  • Option to switch on/off 'require' in the forms.
  • Easy to apply custom styles.

Getting started

  1. Attach directive to your application just after AngularJS framework:

    <script src="./angular.min.js"></script>
    <script src="./ng-datalist/dist/ng-datalist.js"></script>
  2. Add 'ng-datalist' module to your application dependencies:

    angular.module('myApp', ['ng-datalist']);
  3. Insert directive to the application:

    <ng-datalist items=myAwesomeList current=myElement></ng-datalist>

Directive Options

  • items {Array} (required) - array containing items to be displayed on the list.
  • current {string} (required) - use to get/set current input value.
  • req {boolean} (optional) - set to true if input should be required by the form.
  • styling {boolean} (optional) - set to false to disable default styles.

Styling

Switch styling option to false, so that your new styles will work well:

<ng-datalist items=myItems current=currentItem styling="false"><ng-datalist>

Now you can start to style elements using ng-datalist-container class or accessing directly by directive element class name:

/* Directive container */
.ng-datalist-container {
    border: 1px solid #020D45;
    height: 50px;
    width: 300px;
}

/* Directive input */
.ng-datalist-container input:focus {
    border-color: #13B3AB;
}
/* by direct class */
.ng-datalist-input:focus {
    border-color: #13B3AB;
}

/* Directive list */
.ng-datalist-container ul {
    max-height: 100px;
}
/* by direct class */
.ng-datalist-list {
    max-height: 100px;
}

/* Directive list item */
.ng-datalist-container li {
    color: #020D45;
}
/* by direct class */
.ng-datalist-item {
    color: #020D45;
}

License

The MIT License (MIT)

About

AngularJS directive providing text input with searchable dropdown list.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published