Skip to content

spongessuck/gm.typeaheadDropdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 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