使用 Angular 显示搜索结果

Question

我正在做一个项目，我似乎无法使用 AngularJS 向 Node.js+MongoDB 后端发出 API 请求。

我有一个 api 路由这样实例化：

app.get("/search_database/:queryString", function(req, res) { ... });

我正在尝试使用 Angular 在前端构建一些东西，以在浏览器上显示这些结果（以原始格式 JSON）——但无济于事。 API 来自浏览器的请求显示了我想要的，但我希望能够用 AngularJS 做同样的事情。

感谢任何指导！谢谢！

这是我目前拥有的：

test.html

<html ng-app="test">
 <head>
    <meta charset="utf-8">
    <title>Angular.js JSON Fetching Example</title>
       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
     <script> src="core.js"</script>
   </head>

  <body ng-controller="searchCntrlr">
      <div>
      <input class="search-bar-input", ng-model="searchText"/>
      </div>

   {{results}}
   </body>


</html>

core.js

var app = angular.module("test",[]);

app.controller('searchCntrlr', $scope, $http) {
    $http.
      get('/search_database/:searchText/' + $scope.searchText).
      success(function(res){
        $scope.results = res.data;
      });
  };

Answer 1

你实际上需要这样调用你搜索更改：

var app = angular.module("test",[]);

app.controller('searchCntrlr', $scope, $http) {
  $scope.search = function() {
    $http.
    get('/search_database/:searchText/' + $scope.searchText).
    success(function(res){
      $scope.results = res.data;
    });

  }
};

并在您的模板中调用此函数：

<input class="search-bar-input", ng-model="searchText" ng-change="search()"/>

或手动 $watch 您的模型并在那里调用搜索。

Answer 2

所以我找到了我的问题——一堆严重的错别字：

已更正 test.html（core.js 中的拼写错误）

<html ng-app="test">
  <head>
    <meta charset="utf-8">
    <title>Angular.js JSON Fetching Example</title>
       <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
     <script src="core.js"></script>
   </head>

  <body ng-controller="searchCntrlr">
    <div>
      <input class="search-bar-input", ng-model="searchText" ng-change="search()"/>
    </div>

    {{results}}
  </body>

</html>

更正了 core.js（完全搞砸了之前的 app.controller 语法）

var app = angular.module("test",[]);

app.controller('searchCntrlr', ['$scope', '$http', function($scope, $http) {
  $scope.search = function() {
    $http.
    get('/search_database/' + $scope.searchText).
    success(function(res){
      $scope.results = res;
    });

  }
}]);

使用 Angular 显示搜索结果

Displaying search results using Angular

javascript

angularjs

mean-stack