Pass Angular typeahead object result to another function in controller

Question

In this scenario I'm using the ui-bootstrap typeahead to capture an object from an external api. Using the select callback I'm getting that object and have the results set in a separate function within my controller.

The issue is that I want to take those results and send them off to a separate api with a click function I already have set up. My question is how do i get the results of the type-ahead into the click function to post? The user flow is as follows.

<div>
    <input type="text" placeholder="Find A Game" 
           typeahead-on-select="setGames($item)" 
           ng-model="asyncSelected" 
           typeahead="test.name for test in getGames($viewValue)" 
           typeahead-loading="loadingLocations" typeahead-min-length="3" 
           typeahead-wait-ms="500" typeahead-select-on-blur="true" 
           typeahead-no-results="noResults">
</div>


<div ng-show="noResults">
  No Results Found
</div>
<button ng-disabled="!asyncSelected.length" 
        ng-click="addtodb(asyncSelected)">Add To Database</button>

As you can see the label is set to the items name and this works fine. When the user selects the name I then use typeahead-on-select="setGames($item)" to send off the entire object to its own funtion. From there I want to take the object and pass it to another function that you can see within the button tags ng-click. I currently have it passing the model, but what I really want is to pass the entire object within $item from the select event. So far my controller looks like this:

angular.module('2o2pNgApp')
  .controller('GiantCtrl', function ($scope, $http, TermFactory, $window, SaveFactory) {

      $scope.getGames = function(val) {
        return $http.jsonp('http://www.example.com/api/search/?resources=game&api_key=s&format=jsonp&limit=5&json_callback=JSON_CALLBACK', {
          params: {
            query:  val
          }
        }).then(function(response){
          return response.data.results.map(function(item){
            return item;
          });
        });
      };

      $scope.setGames = function (site) {
        var newsite = site;
      };


      $scope.addtodb = function (asyncSelected, newsite) {
            TermFactory.get({name: asyncSelected}, function(data){
              var results = data.list;
              if (results === undefined || results.length === 0) {
          SaveFactory.save({vocabulary:'5', name:newsite.name, field_game_id:newsite.id}, function(data) {
              $window.alert('All Set, we saved '+asyncSelected+' into our database for you!')
          });
              } else {
                // do stuff
            });
      }

  });

No matter what I do I cant seem to pass the entire $item object into this click function to post all the info i need.

You are not passing the $item to addtodb - the newsite parameter is thus undefined. Are you not getting the $item in setGames? — New Dev
– New Dev, Commented Aug 15, 2015 at 23:01
I've tried it with just passing $item to addtodb as well without it working. I am getting the $item from setGames function, but Im not sure how to then pass that into my addtodb function. — Mr. BigglesWorth
– Mr. BigglesWorth, Commented Aug 15, 2015 at 23:12
Well, $item is only available locally for typeahead-on-select... you can either assign it to some model within your controller, or, in fact, make the model of typeahead to be the item: typeahead="test as test.name for test in getGames($viewValue)" — New Dev
– New Dev, Commented Aug 15, 2015 at 23:55
Not sure how I assign it to another model. For the second suggestion, this would work fine, but the problem is that then the dropdown and select just show [object] [object] as the results which makes it fairly unusable. — Mr. BigglesWorth
– Mr. BigglesWorth, Commented Aug 16, 2015 at 0:13
Method one did in fact work. I was messing up the order and assigning it to the name and not the object. Thanks New Dev! — Mr. BigglesWorth
– Mr. BigglesWorth, Commented Aug 16, 2015 at 4:25

Mr. BigglesWorth · Accepted Answer · 2015-08-16 04:26:39Z

0

Via New Dev in Comments:

$item is only available locally for typeahead-on-select... you can either assign it to some model within your controller, or, in fact, make the model of typeahead to be the item: typeahead="test as test.name for test in getGames($viewValue)" – New Dev

answered Aug 16, 2015 at 4:26

Mr. BigglesWorth

1,5403 gold badges20 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass Angular typeahead object result to another function in controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related