如何在選擇選項時從API動態調用數據

Question

假設我在選擇標籤中有兩個酒店，我希望我的h1在選擇其中一個選項時進行更改。我如何實現這一點

我正在使用POST方法授權和調用我的reservationCtrl中的數據並在我的select標籤中顯示hotel_name。

<div class="container"> 
     <div class = "row" ng-controller="reservationCtrl"> 
      <div class="form-group"> 
       <label for="sel1">Select a Hotel:</label> 
       <select class="form-control" id="sel1"> 
        <option ng-repeat="x in hotels.data">{{x.hotel_name}}</option> 
       </select> 
      </div> 
     </div> 

而我正在使用GET方法從另一個API調用數據來顯示hotel_name。

 <div class="row" ng-controller="showCtrl"> 
      <div class="col-md-4"> 
       <h1 ng-repeat="x in hotel.data">{{x.hotel_name}}</h1> 
      </div> 
     </div> 
</div> 

這是我showController，我想我的酒店ID改變就像從72到35，當我點擊其中的一個選項，這樣它會從不同的API調用的數據，並在報頭顯示不同的名字。

(function(){ 
    angular 
     .module("reservationModule") 
     .controller("showCtrl", function($http, $scope, $log){ 


        $http({ 
          method: 'GET', 
          url: '&hotel_id=72'}) 
         .then(function (response) { 
          $scope.hotel = response.data; 
         }, function (reason){ 
          $scope.error = reason.data; 
          $log.info(reason); 
         }); 
     }); 


})(); 

這裏是reservationController

(function(){ 
    angular 
     .module("reservationModule") 
     .controller("reservationCtrl", function($http, $scope, $log){ 

      $http({ 
     url: '', 
     method: "POST", 
     data: 'postData', 
     headers:{ 'Authorization': 'value'} 
    }) 
    .then(function(response) { 
      $scope.hotels = response.data; 
     } 
    ); 
     }); 


})(); 

Answer 1

是的，你可以添加ng-change並實現你的功能兩者均如下

JS代碼

var app = angular.module('myApp', []); 

    app.controller('ctrl1', function($scope) { 
    $scope.hotels = [{ 
     name: 'Taj', 
     id: 1 
    }, { 
     name: 'Royal', 
     id: 2 
    }]; 
    $scope.hotelInfo = {}; 
    $scope.fetchData = function() { 
     // here call service which will fetch data and assign to hotel data 
     $scope.hotelInfo = { 
     address: 'London' 
     }; 
    } 

    }); 

    app.controller('ctrl2', function($scope) { 
    $scope.data = '' 

    }); 

HTML代碼

<div ng-app='myApp'> 
    <div ng-controller='ctrl1'> 
     <select ng-options='item as item.name for item in hotels' ng-model='hotel' ng-change='fetchData()'> 
     </select> 
     {{hotel}} - {{hotelInfo}} 
    </div> 
    </div> 

這裏是鏈接Jsfiddle demo

Answer 2

你需要調用的選擇框，這將調用簡單的函數，事件，返回的數據，如以下

<select ng-options="size as size.name for size in sizes" 
    ng-model="item" ng-change="update()"></select> 

寫的javascript代碼更新功能

Answer 3

您可以使用上選擇特定酒店的NG-變化。

In congroller : 
 

 
$scope.showHotel = function(hotelName){ 
 
    $scope.selectedHotel = hotelName; 
 
}

<div class="row" ng-controller="showCtrl"> 
 
    <div class="col-md-4"> 
 
      <h1 ng-repeat="x in hotel.data" ng-change="showHotel(x.hotel_name)">{{x.hotel_name}}</h1> 
 
    </div> 
 
</div>

鑑於您可以編輯這樣的，如果你要顯示只有一個酒店的名字，而不是NG-重複：

<div class="row" ng-controller="showCtrl"> 
 
     <div class="col-md-4"> 
 
      <h1>{{selectedHotel}}</h1> 
 
     </div> 
 
</div>