AngularJS Force Model To Update From Angular Ui TypeAhead

Question

so I have an Angular UI Typeahead that is working, however I have a use case that I can't get it to cooperate with.

My issue is getting it to display a certain value based not on user-input, which works, but based on the state.

I'm using Angular UI Router, so my code looks like this:

if($stateParams.assetID != undefined)
  {
    $http.get('/getData/idRepo', {
      params: {
        id: $stateParams.assetID
      }
    }).then(function(response){
        $scope.getMaterial(response.data[0].Title);
        //this is where I try and trigger the getMaterial 
        //function to show the Typeahead value based on a url parameter
        //
    });
  }

$scope.getMaterial = function(val) {
    return $http.get($scope.material[0].Query, {
      params: {
        title: val
      }
    }).then(function(response){
        return response.data;
    });
};

My Typeahead HTML is this:

<input type="text" ng-model="selected.asyncSelected"
       placeholder="Material Name..." 
       uib-typeahead="med as med.name for med in getMaterial($viewValue)" 
       typeahead-editable="false"
       typeahead-template-url="meditationssearch.html" 
       typeahead-select-on-exact="true" 
       typeahead-select-on-exact="true" 
       typeahead-loading="loadingLocations" 
       typeahead-no-results="noResults"
       class="form-control">

As you can see, the typeahead reads from getMaterial() which I try to trigger in my if($stateParams.assetID != undefined) conditional.

Expected workflow:

Navigate to this view with a $stateparam for the assetID in the url.
Have the conditional see that assetID param is not undefined, fire the GET request and then have it return the results from the running getMaterial() (the result of the first GET request gets passed through getMaterial's() own GET request - as if the result of the first GET request were being typed in).
Update the model/typeahead to display getMaterial() value in the view.

I tried $scope.$apply() but the digest is already in progress. I'm hoping there is another quick fix that I'm just not aware of to trigger the typeahead.

I also tried something like this:

jQuery("input[uib-typeahead]").val(response.data[0].Title).trigger('input');

...but that isn't a good solution because some of the assets I am type-aheading for have the exact same name, which is why I'm trying to use the id as my url parameter and have the typeahead source function pick up the name as if it was typed in and then return to full object (name/id) to the model.

Please help me achieve my desired workflow.

Edit: Typeahead Source Code:

I believe I want to activate something in the select function:

 scope.select = function(activeIdx, evt) {
      //called from within the $digest() cycle
      var locals = {};
      var model, item;

      selected = true;
      locals[parserResult.itemName] = item = scope.matches[activeIdx].model;
      model = parserResult.modelMapper(originalScope, locals);
      $setModelValue(originalScope, model);
      modelCtrl.$setValidity('editable', true);
      modelCtrl.$setValidity('parse', true);

      onSelectCallback(originalScope, {
        $item: item,
        $model: model,
        $label: parserResult.viewMapper(originalScope, locals),
        $event: evt
      });

      resetMatches();

      //return focus to the input element if a match was selected via a mouse click event
      // use timeout to avoid $rootScope:inprog error
      if (scope.$eval(attrs.typeaheadFocusOnSelect) !== false) {
        $timeout(function() { element[0].focus(); }, 0, false);
      }
    };

Maybe resetMatches()? How do I call that from my own controller?

The example code doesn't make sense. What is the URL that the getMaterial function use for its fetch? The code example uses $scope.material[0].Query but does not show how $scope.material is initialized. — georgeawg
@georgeawg it's just a variable URL that changes based on other conditions... by the time I want to run this code $scope.material is already dealt with.. — Summer Developer
$scope.material array conflicts with the iterator that the uib-typeahead directive uses. — georgeawg
@georgeawg Understood, I edited my code and question to change the uib-typeahead iterator. — Summer Developer

Mathew Berg Mathew Berg · Accepted Answer · 2018-01-25T17:54:59

Instead of having getMaterial($viewValue) in the html (Which will fire every digest cycle...) you can wire up an ng-change instead and that way only fire when the data has actually changed. In that case you have a model $scope.materials now that you can update whenever you want to get the changes.

javascript:

$scope.modelChanged = function(){
    $http.get($scope.material[0].Query, {
        params: {
            title: $scope.selected.asyncSelected
        }
    }).then(function (response) {
        $scope.materials = response.data;
    });
}

if ($stateParams.assetID != undefined) {
    $http.get('/getData/idRepo', {
        params: {
            id: $stateParams.assetID
        }
    }).then(function (response) {
        $scope.selected.asyncSelected = response.data[0].Title;

        $scope.modelChanged(); //not sure if you have to run this it might fire automatically
    });
}

HTML:

<input type="text" ng-model="selected.asyncSelected"
       placeholder="Material Name..." 
       uib-typeahead="material as material.name for material in materials" 
       typeahead-editable="false"
       typeahead-template-url="meditationssearch.html" 
       typeahead-select-on-exact="true" 
       typeahead-select-on-exact="true" 
       typeahead-loading="loadingLocations" 
       typeahead-no-results="noResults"
       ng-change="modelChanged()"
       class="form-control">

AngularJS Force Model To Update From Angular Ui TypeAhead

3 Answers

The DEMO