CODEWITHSUNDEEP
javascriptangularjs
user3194397
user3194397

Reputation: 41

AngularJS - $http with bound parameters

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.

Upvotes: 3

Views: 189

Answers (2)

user3194397
user3194397

Reputation: 41

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!

Upvotes: 1

Wottensprels
Wottensprels

Reputation: 3327

$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')

Upvotes: 1

Related Questions