$scope.states = ['Alabama', 'California', 'Delaware', ...]
would be used as:
<input ng-model='state' typeahead='states | filter:$viewValue'>
and model would be bound with a selected item from an array.
$scope.getStates = function($viewValue) {
//hey, we can return promises and typeahead will understand them!
return $http.get('/mybackend/states', {
params : {query: $viewValue}
}).then(function(response){
//assuming that backend will return an array here
//I can do any transformations, sorting, limiting etc. at this point
return response.data;
});
}
would be used as:
<input ng-model='state' typeahead='getStates($viewValue)'>
$scope.states = [{name: 'Alabama'}, {name: 'California'}, {name: 'Delaware'}, ...]
would be used as:
<input ng-model='state' typeahead='state.name for state in states | filter:$viewValue>
Model will be bound with a full object, ex.: {name: 'California'}
$scope.states = [{code: 'AL', name: 'Alabama'}, {code: 'CA', name: 'California'}, {code: 'DE', name: 'Delaware'}, ...]
would be used as:
<input ng-model='state' typeahead='state.name+' ('+state.code+')' as state.code for state in states | filter:$viewValue | orderBy:"name"'>
Model will be bound with a state code, ex.: CA
while label will be combination of a name and code: California (CA)
<input ng-model='state' typeahead='state.name+' ('+state.code+')' as state.code for state in getStates($viewValue)'>
where the filtering and orderign would be done inside the getStates
function.
Generally spaking syntax is very similar to the one used by the <select>
directive: http://docs.angularjs.org/api/ng.directive:select
Those combination would be supported:
typeahead='sourceExpression'
- source for the typeahead, where sourceExpression can be either an array or a promie resolving to an array. A special variable$viewValue
is available while evaluating this expressiontypeahead='labelExpression for tempVariable in sourceExpression'
typeahead='labelExpression as modelToBeBound for tempVariable in sourceExpression'
All the filtering and ordering can be done in expressions so no options are needed for this. Same for higlighting (!).
The only options (other attributes) that would stay are:
typeahead-min-length
- The minimum character length needed before triggering autocomplete suggestions - defaults to 1typeahead-item-template
- killer here - people could specify a template (or templateUrl!) for an individual item so people can add makup referencing other directives (for example.: ng-src to include images in typeahead results)
I think that @rgaskill is right. The following syntax seems to work fine to me.
The only problem is that when the page is loaded the input field contains the string " ()". Is there any way to have an empty input field instead?
Thanks in advance for your help.
David
EDIT: solved by using a function in the "as" field. ;)