Skip to content

AngularJS directive combining UI Bootstrap's Typeahead component with a dropdown component.

License

Notifications You must be signed in to change notification settings

pv93/gm.typeaheadDropdown

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gm.typeaheadDropdown

Use this module when you want to combine the features of UI Bootstrap Typeaheads and Dropdowns.

You can use the following markup for a simple component:

<typeahead-dropdown ng-model='selectedOption' options='options'></typeahead-dropdown>

The 'options' attribute must reference either an array of objects or a $q-like or $http promise that will return an array of objects when resolved.

By default, the directive will use a property 'name' in the object to use as the label for the model and the options. When an option is selected, the option's properties are extended onto the model.

An example of a valid 'options' property to use above could be the following:

$scope.options = [
	{ name:"Mary" },
	{ name:"Jane" },
	{ name:"John" },
	{ name:"Fred" }
];

You can also use the 'config' attribute to set a custom property you want to use as the label for both the model and the options. It should reference an object with one or both of the following properties: modelLabel and optionLabel.

An example of a config object that tells the directive to show the 'label' property of the model, and the 'title' property of the options would look like:

	$scope.config = {
		modelLabel: "label",
		optionLabel: "title"
	}

The model will inherit a selected option's label property value onto its own label property, as well as any other properties the option has.

#Demo View on Plunker

About

AngularJS directive combining UI Bootstrap's Typeahead component with a dropdown component.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 59.7%
  • HTML 40.3%