如何在选择选项时从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>