Execute a function when the page is loaded angular

Question

I have this function selectHotel() which executes when the select box is clicked and I have used GET method to call data and display it on my view.

I have two options on my select area and it fetches different data for both of them. I want the data of my first option to be displayed when the page is loaded and not when I click the select box.

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

Here is the controller

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

You can directly call that first option function when page load. — Nagarjuna Reddy
– Nagarjuna Reddy, Commented Mar 18, 2017 at 5:28
are you basically willing to select first item in the select box by default ? — Prashant G
– Prashant G, Commented Mar 18, 2017 at 5:36
The first item in the select box is selected by default. But the item's additional data isn't called until I click on the select box. I want the first item's additional data to be called when the page is loaded and when I select the second option, It should display the second item's data — DragonBorn
– DragonBorn, Commented Mar 18, 2017 at 5:42

Prashant G · Accepted Answer · 2017-03-18 06:57:14Z

Change your HTMl to invoke a changeHotel when different option is selected.

Invoke changeHotel after all the hotels are loaded passing the first item in the hotel list. This will load the data for the first hotel as per your necessity.

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 ... };

Check this CodePen Demo

Check this codepen demo ... let me know whats missing . codepen.io/prashantghimire/pen/Mprewr
Now i look at you code again ... try invoking $scope.selectHotel() after $scope.current_Hotel = $scope.hotels.data[0]; line ...
Tried.Still dosen't work. I have edited my view. The part where I have used ng-repeat is only displayed when I click on the select area. I have used ng-init instead of ng-click but then the additional data is not being displayed

Collectives™ on Stack Overflow

Execute a function when the page is loaded angular

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related