Here's my markup. I am using ng-repeat and using x to pass it through a function to fetch data in my controller.
<div class="row" ng-repeat="x in roomdata.data">
<div class="well well-sm">{{x.room_type}}<a href="#" data-toggle="modal" data-target="#room_detail{{$index}}" class="pull-right">Room Details</a>
</div>
<h5 class="pull-right">{{x.rack_price}}<br>Per room per night</h5>
<img id="roomImg" ng-src="{{x.room_image}}" ng-init=fetchImage(x)>
<div class="row">
<select ng-model="selvalue" ng-change="setPrice()" ng-init=fetchPlan(x)>
<option ng-repeat="y in x.plan_name track by $index">{{y}}</option>
</select>
<h4>{{book_status}}</h4>
</div>
<h3> ₹ {{x.rack_price}} </h3>
<h3>₹ {{x.price}}</h3>
</div>
</div>
Here's the roomdata GET method
$http({
method:'GET',
url: '&hotel_id=' +$scope.current_Hotel.hotel_id
}).then(function(response){
var roomdata = response.data;
$scope.roomdata = roomdata;
var roomtype = roomdata.data;
});
And the JSON for that
{
status: 200,
message: "Packages Found",
data: [
{
room_type_id: "9",
hotel_id: "40",
room_type: "Delux",
total_rooms: "10",
rack_price: "2500",
image: "47",
},
{
room_type_id: "214",
hotel_id: "40",
room_type: "Super Delux",
total_rooms: "30",
rack_price: "3000",
image: "495",
}
]
}
$scope.fetchPlan = function(x){
$http({
method:'POST',
url: 'check_in='+ $scope.today+'&check_out='+$scope.tomorrow+'&room_type=' + x.room_type_id + '&day=1'
}).then(function(response2){
var plan_data = response2.data;
x.price = angular.fromJson(plan_data.price);
x.plan_name = angular.fromJson(plan_data.plan_name);
$scope.selvalue = x.plan_name[0];
x.price = x.price[0];
$scope.setPrice = function(){
var selected = this.selvalue;
var index = plan_data.plan_name.indexOf(selected);
$scope.price = plan_data.price[index];
};
Here's the JSON data for plan_data for one x.room_type_id
{
price: "["2700","2500"]",
plan_type: "["CP","EP"]",
plan_name: "["Summer Plan","Summer Plan"]",
}
and for another x.room_type_id
{
price: "["2000","1200"]",
plan_type: "["CP","EP"]",
plan_name: "["Summer Plan","Custom Plan"]",
}
What I have tried:
So currently my options are displayed fine. But in my {{x.price}} it displays as 2000 in one row and 2700 in the other row which is correct. But the value doesn't change when I select other options. What am I doing wrong?
EDIT: It's because I have two Summer Plan in the first x.room_type_id. Can I join plan_name and plan_type and show it in the options like Summer Plan(CP) and Summer Plan(EP). I think it will work that way