CODEWITHSUNDEEP
angularjs
rawa
rawa

Reputation: 333

AngularJS: "$http.get" with input URL

I'm new to AngularJS and am trying to use it to link up with a simple web API I have in place. I already have URLs that return JSON data in the format: http://127.0.0.1:8000/posts/ followed by a date in the format YYYY-MM-DD. (example would be http://127.0.0.1:8000/posts/2015-07-28)

I have an input text box which I want to use to get the JSON data from my API and list it out, meaning if I enter 2015-07-28 into the input box, it should pull the JSON data from the API appropriately without a page refresh by appending the string value from the input box onto whatever URL I want (in this case that would be http://127.0.0.1:8000/posts/).

Here is what I have as of right now: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular Test</title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    <script>
        var ListingApp = angular.module('ListingApp', []);

        ListingApp.controller('PostCtrl', function($scope, $http) {
            $scope.select = "";

            var postJSON = "http://127.0.0.1:8000/posts/" + $scope.select;
            console.log(postJSON);

            $http.get(postJSON)
                    .then(function(res) {
                        $scope.posts = res.data;
                        console.log($scope);
                    });
        });
    </script>
</head>

<body ng-app="ListingApp">

<div ng-controller="PostCtrl">
    <form name="dateForm">
        <input type="text" id="dp" name="datepicker" ng-model="select" placeholder="Enter Date">
    </form>

    <span ng-bind="select" style="color: red">{{ dateForm.datepicker }}</span>

    <ul>
        <li ng-repeat-start="post in posts">
            pk: {{ post.pk }}
        </li>

        <li>
            author: {{ post.author }}
        </li>

        <li ng-repeat-end>
            category: {{ post.category }}
        </li>
    </ul>
</div>

<!-- Importing jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

</body>
</html>

Upvotes: 0

Views: 1644

Answers (1)

Justin Poehnelt
Justin Poehnelt

Reputation: 3469

Use ng-change or watch your model. Depending on your input you may want to use the debounce in ng-model-options.

 var ListingApp = angular.module('ListingApp', []);

 ListingApp.controller('PostCtrl', function($scope, $http) {
   $scope.select = "";

   var postJSON = "http://127.0.0.1:8000/posts/" + $scope.select;
   console.log(postJSON);

   function getPost() {
     $http.get(postJSON)
       .then(function(res) {
         $scope.posts = res.data;
         console.log($scope);
       });
   }
   
   // option #1 with ng-change="change()"
   $scope.change = function() {
      getPost();    
   }
   
   // option #2 with watch
   $scope.$watch('select', function (val, old) {
     console.log(val);
     getPost();
     });
 });
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Angular Test</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

</head>

<body ng-app="ListingApp">

  <div ng-controller="PostCtrl">
    <form name="dateForm">
      <input type="text" id="dp" name="datepicker" ng-model-options="{ debounce: 500 }" ng-change="change()" ng-model="select" placeholder="Enter Date">
    </form>

    <span ng-bind="select" style="color: red">{{ dateForm.datepicker }}</span>

    <ul>
      <li ng-repeat-start="post in posts">
        pk: {{ post.pk }}
      </li>

      <li>
        author: {{ post.author }}
      </li>

      <li ng-repeat-end>
        category: {{ post.category }}
      </li>
    </ul>
  </div>

  <!-- Importing jQuery -->
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

</body>

</html>

Upvotes: 2

Related Questions