AngularJSの$ http.getクエリに検索クエリを追加します。

Question

私のアプリの$ http.get URLに検索クエリとして入力した注文番号を追加しようとしましたが、喜んでいませんでした。

私はそれが私が$ scope.query =クエリとしてコントローラにするlist.htmlに検索クエリを追加http://example.com/api/booking/get/orders/121137

ためということ取り出す特定の順序番号の完全なパスを入れた場合は、

.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 URL /構文

Answer 1

あなたのコントローラは、コード

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

を実行するとき$scope.queryが定義されていないので、それは（するlist.htmlで入力ボックスが空である）http://example.com/api/booking/get/orders/を呼び出します。ここで入力ボックスに何かを入力すると、の値は入力ボックスの値に変わりますが、$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; 
    } 
} 

のような機能で$http.getを囲み、私は私ではないの$ scope.query後の単一引用符は、そのcuzのようにする必要がありましだと思う

<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

を次のようにするlist.htmlになります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) 

を変更。