How to display data according to ng-repeat in select tag

Question

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 26-Mar-17 22:02pm

SL-A-SH

Updated 28-Mar-17 2:35am

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Karthik_Mahalingam · Accepted Answer · 2017-03-26T22:23:00

Solution 1

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[^]

Posted 26-Mar-17 22:23pm

Karthik_Mahalingam

Updated 26-Mar-17 22:25pm

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