Question

我曾多次尝试将作为搜索查询输入的订单＃添加到我的应用中的$ http.get网址，但没有任何乐趣。

如果我输入特定订单号的完整路径，则会检索该订单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网址/语法的任何建议吗？

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会看到这是一个String而不是参数。

只需更改此

$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查询

2 个答案: