Submitting paramaters to services? (I'm trying to manipulate an http.get query)

It should be pretty straight forward from my code, but what I’m trying to do is take some form values and modify my api query within my service to reflect that.

I have a view that works great, it pulls in a list from my api and populates:

<ion-view>
  <ion-content>
    <select>
      <option value="myvalue1" name="PARAM1" id="PARAM1">value1</option>
      <option value="myvalue2" name="PARAM2" id="PARAM2">value2</option>
    </select>
    <button data-ng-click="filterResults()">submit</button>

  <ion-list>
    <ion-item data-ng-repeat="thing in things" href="#/thing/{{thing.ID}}">
      <h2>{{thing.title}}</h2>
    </ion-item>
  </ion-list>

  </ion-content>
</ion-view>

Which as a controller:

.controller('ThingIndexCtrl', function($scope, $ionicLoading, ThingService) {
  $scope.things = ThingService.all();
  
  $scope.filterResults = function() {
    $scope.things = ThingService.all(PARAM1, PARAM2); //need to send param1 and param2
  };
})

That has a service:

.factory('ThingService', function($http) {
  var things = [];

  $http.get('http://mylocalapi.tld/things/directory/?param1=PARAM1&param2=PARAM2') //only use param1, param2 if exist (if they're empty it should be ok)
    .then(function(response){          
      var jsonData = response.data.thingsfromapi;
      var jsonKeys = Object.keys(jsonData);

      for (var i = 0; i < jsonKeys.length; i++) {
        var jsonSingle = jsonData[jsonKeys[i]];
        things.push(jsonSingle);
      }
    })

  return {
    all: function() {
      return things;
    },
    get: function(thingId) {
      var myItem = _.find(things, { 'ID' : parseInt(thingId)});
      return myItem;
    }
  }
})

So I just need to pass the PARAM values when clicking a link/button back into my $http.get for a new result.

Something like this :

.factory(‘ThingService’, function($http) {
var things = [];

var loadThings = function(param1, param2) {

	var url = 'http://mylocalapi.tld/things/directory/';

	if(param1 && param2) {
		url = http://mylocalapi.tld/things/directory/?param1=PARAM1&param2=PARAM2'
	}

  $http.get(url) 
    .then(function(response){          
      var jsonData = response.data.thingsfromapi;
      var jsonKeys = Object.keys(jsonData);

      for (var i = 0; i < jsonKeys.length; i++) {
        var jsonSingle = jsonData[jsonKeys[i]];
        things.push(jsonSingle);
      }
    })

}

return {
all: return loadThings
},
get: function(thingId) {
var myItem = _.find(things, { ‘ID’ : parseInt(thingId)});
return myItem;
}

Thanks, I was able to implement a pretty much working solution going from that.

Now I need to pass the values from my inputs to my initial click function (currently I’m just declaring manually via data-ng-click="filterResults('myvalue1', 'myvalue2')") – I’m assuming something like ng-switch will help me here?

Secondly, which may be solved when i pass the parameters above; but when the list populates with filtered results after clicking the button, and I click that result for a detail page - clicking the back button will reload the “all” list due to, well, requesting all by default in the controller.

So I guess i need to figure out the best way to keep the filtered list/position in scroll when going back from a filtered selection. (If my input selects don’t change back to default when I go back to that page, it should be able to re-fetch the filtered albeit without the scroll position where you last left off)

Use ng-model on the inputs. Then when you submit, just pass those model values from the controller:

<input type="text" ng-model="param1"/>
<input type="text" ng-model="param2"/>
$scope.filter = function() {
  $scope.things = ThingService.all($scope.param1, $scope.param2)
};

When using ng-model on a select it’s injecting <option value="? undefined:undefined ?"></option> as my first option. How would I set a default in it’s place (like <option value="">All</option>)

I’m assuming because on the select it’s looking to bind some data from the controller by default?

Either way my select box currently in code:

<select name="things" data-ng-model="param1">
        <option value="">All</option>
        <option data-ng-repeat="thingtype in thingtypes" value="{{thingtype.value}}">{{thingtype.name}}</option>
</select>

Which does work, except that it ends up injecting that undefined option as the first element when adding the model.

HTML Output:

<select name="things" data-ng-model="param1">
        <option value="? undefined:undefined ?"></option>
        <option value="">All</option>
        <!--//... list of ng-repeat elements...//-->
</select>

Is there a way to tell it not to inject an option? Or if not, how can i pull the <option value="">All</option> to be the injected value.

The problem is now gone; however how it fixed itself I dunno. Maybe when i closed/reopened my browser.