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

页面加载角度时执行功能

1 个答案: