how to call http request on ng-click event?

All we need is an easy explanation of the problem, so here it is.

I am using angularjs on front end. I have two input boxes on index.html (namely first-name and last-name), and one button. On the click of button (ng-click=”search()”) I want to call an http GET request with first-name and last-name as parameters. And then I want to show the response in the same page in some other DIV tag. How would I achieve this?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

HTML:

<div ng-app="MyApp" ng-controller="MyCtrl">
  <!-- call $scope.search() when submit is clicked. -->
  <form ng-submit="search()">
    <!-- will automatically update $scope.user.first_name and .last_name -->
    <input type="text" ng-model="user.first_name"> 
    <input type="text" ng-model="user.last_name">
    <input type="submit" value="Search">
  </form>

  <div>
    Results:
    <ul>
      <!-- assuming our search returns an array of users matching the search -->
      <li ng-repeat="user in results">
         {{user.first_name}} {{user.last_name}}
      </li>
    </ul>
  </div>

</div>

Javascript:

angular.module('MyApp', [])
  .controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {
      $scope.user = {};
      $scope.results = [];

      $scope.search = function () {
          /* the $http service allows you to make arbitrary ajax requests.
           * in this case you might also consider using angular-resource and setting up a
           * User $resource. */
          $http.get('/your/url/search', { params: user },
            function (response) { $scope.results = response; },
            function (failure) { console.log("failed :(", failure); });
      }
  }]);

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply