Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

feat(typeahead) Allow for an optional input field renderer #241

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/typeahead/docs/demo.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
<input type="text" ng-model="selected" typeahead-input-formatter="testFormatter" typeahead="state for state in states | filter:$viewValue">
</div>
7 changes: 7 additions & 0 deletions src/typeahead/docs/demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,11 @@ function TypeaheadCtrl($scope) {

$scope.selected = undefined;
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

$scope.testFormatter = function(item){
if ( item ) {
return item.toUpperCase();
}
return item;
};
}
17 changes: 14 additions & 3 deletions src/typeahead/typeahead.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@ angular.module('ui.bootstrap.typeahead', [])
//expressions used by typeahead
var parserResult = typeaheadParser.parse(attrs.typeahead);

//optional formatter for the input field
var formatter = originalScope.$eval(attrs.typeaheadInputFormatter);

//create a child scope for the typeahead directive so we are not polluting original scope
//with typeahead-specific data (matches, query etc.)
var scope = originalScope.$new();
Expand Down Expand Up @@ -112,8 +115,16 @@ angular.module('ui.bootstrap.typeahead', [])

modelCtrl.$render = function () {
var locals = {};

locals[parserResult.itemName] = selected || modelCtrl.$viewValue;
element.val(parserResult.viewMapper(scope, locals) || modelCtrl.$viewValue);
var viewValue = parserResult.viewMapper(scope, locals) || modelCtrl.$viewValue;
var modelValue;

if ( formatter ){
modelValue = parserResult.modelMapper(scope, locals);
viewValue = formatter(modelValue) || viewValue;
}
element.val(viewValue);
selected = undefined;
};

Expand All @@ -122,8 +133,8 @@ angular.module('ui.bootstrap.typeahead', [])
var locals = {};
locals[parserResult.itemName] = selected = scope.matches[activeIdx].model;

modelCtrl.$setViewValue(parserResult.modelMapper(scope, locals));
modelCtrl.$render();
originalScope[attrs.ngModel] = parserResult.modelMapper(scope, locals);
resetMatches();
};

//bind keyboard events: arrows up(38) / down(40), enter(13) and tab(9), esc(27)
Expand Down