Click here to Skip to main content
14,698,201 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
Posted
Updated 28-Mar-17 3:35am
v4

1 solution

try

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <select ng-model="selvalue" ng-change="setprice()">
            <option ng-repeat="x in planNames" >{{x}}</option>
        </select> 
      
        <h3>{{price}}</h3>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            var data = {
                price: ["2000", "1200"],
                plan_type: ["CP", "others"],
                plan_name: ["Summer Plan", "Custom Plan"]
            };
            $scope.planNames = data.plan_name;
            $scope.setprice = function () {
                var selected = this.selvalue;
                var index = data.plan_name.indexOf(selected)
                $scope.price = data.price[index];

            }

        });
    </script>

</body>
</html>


Demo: - JSFiddle[^]
   
v2
Comments
SL-A-SH 27-Mar-17 4:52am
   
Thank you so much. This works
Karthik_Mahalingam 27-Mar-17 4:54am
   
welcome
SL-A-SH 27-Mar-17 5:35am
   
Can you please edit it and make Summer plan and 2000 selected by default on page load. I tried using $scope.selvalue = planNames[0]; but it doesn't work
Karthik_Mahalingam 27-Mar-17 5:42am
   
before the end of scope
 $scope.selvalue = data.plan_name[0];
            $scope.price = data.price[0];
SL-A-SH 27-Mar-17 5:49am
   
Thank you :-)
SL-A-SH 28-Mar-17 3:30am
   
Sorry for bothering. I have updated the code. Can you please check and tell me what am I doing wrong. I am really having trouble fixing that.
Karthik_Mahalingam 28-Mar-17 5:18am
   
what is the issue
am bit busy til 6
SL-A-SH 28-Mar-17 6:16am
   
Okay
Karthik_Mahalingam 28-Mar-17 8:48am
   
what is the issue
SL-A-SH 28-Mar-17 8:53am
   
I have updated the whole code. My values don't change when another option is selected. I think its because my first x.room_type_id calls data which has two Summer Plan's in its plan_names. Check out the updated code. You will understand
Karthik_Mahalingam 28-Mar-17 9:15am
   
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <select ng-model="selvalue" ng-change="setprice()">
            <option   ng-repeat="x in planNames">{{x}}</option>
        </select>

        <h3>{{price}}</h3>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            var data = {
                price: ["2700", "2500"],
                plan_type: ["CP", "EP"],
                plan_name: ["Summer Plan", "Summer Plan"]
            };
            $scope.planNames = data.plan_name.map(function (a, b) {return a +'(' + data.plan_type[b] +  ')' });
          
            $scope.setprice = function () {
                 
                var selected = this.selvalue;
                var index = $scope.planNames.indexOf(selected)
                $scope.price = data.price[index];

            }

        });
    </script>

</body>
</html>
Karthik_Mahalingam 28-Mar-17 9:16am
   
this can be achieved in many ways, this is one of them, please explore angualr docs for more.
SL-A-SH 28-Mar-17 9:21am
   
Ok thank you so much
Karthik_Mahalingam 28-Mar-17 22:09pm
   
welcome

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900