옵션을 선택하면 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> 

그리고 나는 호텔 이름을 표시하기 위해 다른 API에서 데이터를 호출하기 위해 GET 메소드를 사용하고 있습니다.

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

아래와 같이 성만 링크를 특정 호텔의 선택에 Jsfiddle demo

Answer 2

인에 자바 스크립트 코드 업데이트 기능

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>