AngularJS - $http with bound parameters

Question

I've searched and searched, but perhaps I don't know the words to represent what I'm trying to do. This is my first app attempt with AngularJS and would appreciate any guidance you can provide.

I have a basic HTML page with the following:

<div ng-app="testApp">
    <div ng-controller="SearchCtrl">
        <input type="text" ng-model="params.firstName">
        <input type="text" ng-model="params.lastName">
        <h1>{{ searchString() }}</h1>

        <table>
            <tr ng-repeat="employee in results">
                <td>{{employee}}</td>
            </tr>
        </table>
    </div>
</div>

I have included the AngularJS library as well as my own app.js file containing the following:

var testApp = angular.module('testApp' []);

testApp.factory('Data', function() {
    return {
        firstName: "", lastName: ""
    }
})

function SearchCtrl($scope, Data, $http) {
    $scope.params = Data;

    $scope.searchString = function() {
        return 'fname=' + $scope.params.firstName + '&lname=' + $scope.params.lastName;
    }
}

With this, my function binds properly and the code within my h1 tag updates dynamically. What I want to do is have the results of an $http get request update dynamically based on the search string. I had code like this inside the controller, which executes - but does not update each time a bound variable updates.

$http.get('results.php?' + $scope.searchString)
    .then(
        function(res) {
            $scope.results = res.data;
});

I'm sure I'm missing a major concept / component of AngularJS. How do I trigger the $http call each time the bound variable changes?

Appreciate any assistance you can provide!

Edit

Attempted the chances proposed by @Sprottenwels, using the params object:

$http.get('results.php?', { 
    params: { fname: $scope.firstName, lname: $scope.lastName } 
})
.then(function(res) { 
        $scope.results = res.data; 
    });
});

The call occurs without error, but both params come up blank in the Chrome console (results.php?fname=&lname=)

Edit 2

At the time the page is laoded, the following call is made:

results.php?fname=&lname=

A log of $scope shows the following relevant elements:

params: firstName: "", lastName: ""
searchString: function() { ... }

Makes sense. Editing a bound variable using the input boxes on the page updates the searchString ( properly displayed in the h1 tag using {{ searchString() }} ) - but does not make the $http call again.

I have to admit, I am at my wit's end. Could you console.log() your $scope properties at the very moment you are making the call and post the results? — Wottensprels
– Wottensprels, Commented Jan 14, 2014 at 15:28
I believe that you are overcomplicating your problem. You do not need to build the searchString by yourself, Angular will handle this for you: The properties given in the params object will be concatenated to a properly working get. Also, what is firing the call? — Wottensprels
– Wottensprels, Commented Jan 14, 2014 at 15:51
As per my edit 2, I'm not actually using searchString in that context - only for displaying on the page. My problem is that nothing is firing the call. I thought that code in the controller was executed when bound variables change - this is my issue. — user3194397
– user3194397, Commented Jan 14, 2014 at 15:55
Oops, i got that wrong, excuse me. Maybe you could try to reproduce the issue at plnkr.co Hopefully, someone fitter than me will have a look at your problem :/ — Wottensprels
– Wottensprels, Commented Jan 14, 2014 at 15:59

Wottensprels · Accepted Answer · 2014-01-14 15:07:21Z

1

$http.get wants to have a params object passed.

  $http.get('results.php',{
            params:{
                searchString: $scope.searchString
            }
        }).then(function(promise){
            // ...
        });

See the list of accepted parameters for further information. (Down there, below 'Usage')

edited Jan 14, 2014 at 15:07

answered Jan 14, 2014 at 14:53

Wottensprels

3,3273 gold badges31 silver badges39 bronze badges

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

4 Comments

user3194397 Over a year ago

I've attempted something similar, and same as my other code, the call executes with parameters but passing $scope.params.firstName results in a "blank" call.I can see the call being made in Chrome Console that has: results.php?fname=&lname=

user3194397 Over a year ago

I'm new here, where do I add this? To the original question? Or as a separate answer?) code $http.get('results.php?', { params: { fname: $scope.firstName, lname: $scope.lastName } }) .then(function(res) { $scope.results = res.data; }); });

Wottensprels Over a year ago

Just add it to the original question, prefarably marked as an Edit :)

user3194397 Over a year ago

Done! Appreciate your help. This community has helped me learn so much over the years - this is the first time I couldn't find an already useful answer (probably because I don't know what to search for)

user3194397 · Accepted Answer · 2014-01-14 19:41:47Z

There was an answer that appeared here, and then disappeared - but I caught it and was able to get what I needed out of it. Thanks to whoever posted it - sorry I can't give you credit for it, I didn't catch your name.

Apparently what I was looking for was the $watch function. By watching a variable, I got the $http call to occur each time it changed.

$scope.$watch($scope.firstName, function() {
    $http.get('results.php', {
        params: {
            fname: $scope.params.firstName,
            lname: $scope.params.lastName
        }
    })
    .then(
        function(res) {
            $scope.results = res.data;
        });
});

I repeated this watch code for the lastName parameter as well.

Hope this helps someone else with the same problem. Thanks to Sprottenwels for assisting on my first SO question!

Collectives™ on Stack Overflow

AngularJS - $http with bound parameters

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related