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

如何设置angularJS中选择的第一个选项

1 个答案: