Question

我是AngularJS的新手，我正在尝试使用它来连接我已经使用的简单Web API。我已经有以下格式返回JSON数据的URL：http://127.0.0.1:8000/posts/，后跟日期格式为YYYY-MM-DD。（例如http://127.0.0.1:8000/posts/2015-07-28）

我有一个输入文本框，我想用它从我的API中获取JSON数据并列出来，这意味着如果我在输入框中输入2015-07-28，它应该从API中提取JSON数据通过将输入框中的字符串值附加到我想要的任何URL（在这种情况下，将是http://127.0.0.1:8000/posts/），没有页面刷新。

以下是我现在的情况：

<!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>

Answer 1

使用ng-change或观察您的模型。根据您的输入，您可能希望在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>

AngularJS：＆＃34; $ http.get＆＃34;输入网址

1 个答案: