feat(typeahead): access to $item in typeahead-input-formatter and item resolver

Author: miiihi

src/typeahead/typeahead.js

@@ -61,6 +61,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
 
       var focusFirst = originalScope.$eval(attrs.typeaheadFocusFirst) !== false;
 
+      // a callback executed on initialization and on setting model value programatically, called with modelValue and should return item object or promise of it
+      var resolveItemCallback = attrs.typeaheadResolveItem ? $parse(attrs.typeaheadResolveItem) : undefined;
+
       //INTERNAL VARIABLES
 
       //model setter executed upon match selection
@@ -172,6 +175,38 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
       //we need to propagate user's query so we can higlight matches
       scope.query = undefined;
 
+      //we need last item to be available in formatters
+      scope.lastItem = undefined;
+
+      //we need lastModel for sync checking last item
+      scope.lastModel = undefined;
+
+      //resolve item, store it to lastItem and rerun modelCtrl formatters
+      var getItem = function (modelValue) {
+        if (!resolveItemCallback) {
+          return;
+        }
+        // call the callback
+        var itemCallbackResult = resolveItemCallback(originalScope, { $model: modelValue });
+        // handle result
+        $q.when(itemCallbackResult).then(function (item) {
+          // discard results, if model value changed or another selection was made
+          if (modelValue !== modelCtrl.$modelValue || modelValue !== scope.lastModel) {
+            return;
+          }
+
+          // store resolved item
+          scope.lastItem = item;
+          // and rerun formatters
+          var viewValue = modelCtrl.$modelValue;
+          for (var i in modelCtrl.$formatters) {
+            viewValue = modelCtrl.$formatters[i](viewValue);
+          }
+          modelCtrl.$viewValue = viewValue;
+          modelCtrl.$render();
+        });
+      };
+
       //Declare the timeout promise var outside the function scope so that stacked calls can be cancelled later 
       var timeoutPromise;
 
@@ -228,6 +263,14 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         if (inputFormatter) {
 
           locals.$model = modelValue;
+          // if we have correct item, use it in formatter, otherwise, get it...
+          if (modelValue === scope.lastModel) {
+            locals.$item = scope.lastItem;
+          } else {
+            scope.lastModel = modelValue;
+            scope.lastItem = undefined;
+            getItem(modelValue);
+          }
           return inputFormatter(originalScope, locals);
 
         } else {
@@ -248,8 +291,8 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap
         var locals = {};
         var model, item;
 
-        locals[parserResult.itemName] = item = scope.matches[activeIdx].model;
-        model = parserResult.modelMapper(originalScope, locals);
+        locals[parserResult.itemName] = item = scope.lastItem = scope.matches[activeIdx].model;
+        model = scope.lastModel = parserResult.modelMapper(originalScope, locals);
         $setModelValue(originalScope, model);
         modelCtrl.$setValidity('editable', true);