Question

我試圖設置第一個選項默認設置爲選中。

<div class="row" ng-controller='ctrl1'> 
    <div class ="form_group"> 
     <select class="form-control" ng-options='item as item.hotel_name for item in hotels.data' ng-model='current_Hotel' ng-click="selectHotel()" ng-selected="selectedOptions.length[0]"></select> 
    </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" ng-click="selectRoom()">Book a room </btn> 
    </div> 

</div> 

我試過使用ng-selected但它不起作用。

這裏是我的控制器

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.selectHotel = function() { 
    $http({ 
     method: 'GET', 
     url: '' + $scope.current_Hotel.exterior_image 
    }).then(function (response) { 

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

當您選擇其中一個選項得到顯示h1和p標籤的值。我希望在加載頁面時選擇第一個選項，以便默認顯示h1和p標記中的值。

Answer 1

只要您在$ scope.hotels對象數組中獲得響應，您就可以初始化您的模型，如 $scope.current_Hotel = $scope.hotels.data[0];。

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