當頁面加載時執行一個函數angular

Question

我有這個函數selectHotel（），它在單擊選擇框時執行，我用GET方法調用數據並將其顯示在我的視圖上。

我在我的選擇區域有兩個選項，它爲它們提取不同的數據。我希望在加載頁面時顯示第一個選項的數據，而不是在單擊選擇框時顯示。

<div class="row"> 
      <div class ="form_group"> 
       <select ng-click="selectHotel()" class="form-control" ng-options='item as item.hotel_name for item in hotels.data' ng-model='current_Hotel'></select> 
       Check In:<input type="date"> 
       Check Out:<input type="date"> 
      </div> 

     <div class="col-md-6">  
      <h1>{{current_Hotel.hotel_name}}</h1> 
      <p>{{current_Hotel.hotel_description}}</p> 
      <img id="hotelImg" class="img img-responsive" ng-src="{{current_Hotel.image_url}}"> 
      <btn class="btn btn-primary">Book a room </btn> 
     </div> 

    </div> 

     <div class="row" ng-repeat="x in roomdata.data"> 
      <div class="well well-sm" >{{x.room_type}}<a href="#" class="pull-right">Room Details</a> 
      </div> 
      <h5>{{x.rack_price}}<br>Per room per night</h5> 
      Adult: <select> 
       <option>1</option> 
       <option selected="selected">{{x.max_people}}</option> 
      </select> 
      Child: <select> 
       <option>{{x.max_child}}</option> 
      </select> 
     </div> 

這裏是控制器

var app = angular.module('myApp', []); 
app.controller('ctrl1', function ($scope, $http) { 
    $scope.current_Hotel = { 
     hotel_id: "", 
     hotel_name: "", 
     hotel_description: "", 
     exterior_image: "", 
     image_url: "" 
    }; 

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

    $scope.selectHotel = function() { 
     $http({ 
      method: 'GET', 
      url: '&image_id=' + $scope.current_Hotel.exterior_image 
     }).then(function (response) { 

       var imgdata = response.data; 
       var imgdata1 = imgdata.data.image_name; 
       $scope.current_Hotel.image_url = "" + imgdata1; 
      }); 

     $http({ 
      method:'GET', 
      url: '&hotel_id=' +$scope.current_Hotel.hotel_id 
     }).then(function(response){ 
      $scope.roomdata = response.data; 
     }); 

    }; 
}); 

Answer 1

改變你的HTML調用changeHotel當選擇不同的選項。

調用changeHotel在所有酒店都通過酒店列表中的第一個項目後加載。這將根據您的需要加載第一家酒店的數據。

HTML：

<select ng-options="hotel as hotel.name for hotel in hotels" 
     ng-model="currentHotel" 
     ng-change="changeHotel(currentHotel)"> 
</select> 

<p>{{disp}}</p> 

的JavaScript：

$http.get('API_URL') 
    .then(function(res) { 

    $scope.hotels = res.data; 
    $scope.currentHotel = res.data[0]; 

    $scope.changeHotel($scope.currentHotel); 

    }); 

$scope.changeHotel = function(hotel) { 
    $scope.currentHotel = hotel; 
    $scope.disp = "This is data for current hotel : " + $scope.currentHotel.name; 
    // stuffs ... 
}; 

入住這CodePen Demo