使用Angular显示搜索结果

Displaying search results using Angular

本文关键字：搜索结果 显示 Angular 使用      更新时间：2023-09-26

我正在一个项目上工作，我似乎无法使用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;
      });
  };

所以我找到了我的问题——一堆可怕的拼写错误:

更正test.html(拼写错误是in in in for the 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;
    });
  }
}]);

您实际上需要像这样调用您的搜索更改:

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你的模型并调用搜索。

相关文章：