オプションが選択されたときにAPIからデータを動的に呼び出す方法

Question

選択タグに自分のオプションに2つのホテルがあり、オプションの1つを選択するとh1を変更したいとします。これを達成するには

POSTメソッドを使用して、私のreservationCtrlでデータを認証して呼び出し、選択タグに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であり、私はそれが別のAPIからデータを呼び出し、ヘッダに別の名前が表示されるように、私はオプションのいずれかをクリックしたときに私のホテルのidが72から35までのように変更します。ここで

(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); 
         }); 
     }); 


})(); 

はあなたが

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

書き込みを次のようにデータを返す簡単な関数を呼び出します選択ボックスでイベントを呼び出す必要が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

はい、変更を追加して機能を達成できますここで

以下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> 

としてityがあなたの特定のホテルの選択にNG-変更を使用することができ、リンクJsfiddle demo

Answer 2

あるのJavaScriptコード更新機能

Answer 3

です。ビューで

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>