将搜索查询附加到 AngularJS 中的 $http.get 查询

Question

我曾几次尝试将作为搜索查询输入的订单附加到我的应用程序中的 $http.get url，但没有成功。

如果我输入特定订单号的完整路径，它会检索该订单 http://example.com/api/booking/get/orders/121137

我在控制器中添加了 list.html 上的搜索查询 $scope.query = query;

 .controller('ListController', ['$scope', '$http', '$state','$cordovaBluetoothSerial', '$window', '$location', function($scope, $http, $state, $cordovaBluetoothSerial, $window, $location) {
      //$http.get('http://example.com/api/booking/get/orders/').success(function(data) {
      //$http({ url: 'http://example.com/api/booking/orders/', method: "GET", params: {query} }).success(function(data) {
      $http.get('http://example.com/api/booking/get/orders/+ $scope.query').success(function(data) {
          //$http.get('http://example.com/api/booking/get/orders/121137').success(function(data) {
          //$http.get('js/121137.json').success(function(data) {
          $scope.orders = [ data.data ];
          $scope.query = query;

这是 plnkr 中的代码。关于更多 $http.get urls/syntax 尝试的任何建议？

Answer 1

当您的控制器执行代码时

$http.get('http://example.com/api/booking/get/orders/'+$scope.query).success(function(data) {
  $scope.orders = [ data.data ];
  scope.query = query;
}

它将调用http://example.com/api/booking/get/orders/，因为$scope.query未定义（list.html中的输入框为空）。现在，当您在输入框中输入内容时，$scope.query 值更改为输入框中的值，但 $http.get.. 不会被调用，因为它未执行。而是将 $http.get 包含在如下函数中

$scope.getOrders= function(){
  $http.get('http://example.com/api/booking/get/orders/'+$scope.query).success(function(data) {
    console.log(data)
    $scope.orders = data.data;
  }
}

和list.html将如下

<ion-header-bar class="bar-dark" align-title="center">
    <h2 class="title">Order Search</h1>
    </ion-header-bar>

  <ion-content padding="true" class="has-header ">
  <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" ng-model="query"  placeholder="Search Order #">

       <button ng-click="getOrders()">search</button>


      </label>
    <ion-list>
      <ion-item ng-show="query" ng-repeat="order in orders" class="item-thumbnail-left item-text-wrap"
      href="#/tab/list/{{order.user}}">
        <h2>Product Name: {{order.name}}</h2>
        <h3>Quantity: {{order.seatcount}}</h3>
        <h2>Order Subtotal: £{{order.subtotal}}</h2>
      </ion-item>
    </ion-list>
  </ion-content>

Answer 2

我想我在 $scope.query 之后看到了一个单引号，它不应该是这样的，因为 JavaScript 会看到它是一个字符串而不是参数。

只需更改此

$http.get('http://example.com/api/booking/get/orders/+ $scope.query').success(function(data)

成为这个

$http.get('http://example.com/api/booking/get/orders/' + $scope.query).success(function(data)

应该可以。

将搜索查询附加到 AngularJS 中的 $http.get 查询

Append search query to $http.get query in AngularJS

javascript

rest

json

angularjs

angular-http