如何根据选择标记中的ng-repeat显示数据 [英] How to display data according to ng-repeat in select tag

问题描述

这是我的标记。我正在使用ng-repeat并使用x传递一个函数来获取控制器中的数据。

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>

这是roomdata GET方法

< br $>

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

及其JSON

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

这是一个x.room_type_id的plan_data的JSON数据

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"]",
}

和另一个x.room_type_id

and for another x.room_type_id

{
price: "["2000","1200"]",
plan_type: "["CP","EP"]",
plan_name: "["Summer Plan","Custom Plan"]",
}

我尝试过：



所以目前我的选项显示正常。但在我的{{x.price}}中，它在一行中显示为2000，在另一行中显示为2700，这是正确的。但是当我选择其他选项时，该值不会改变。我做错了什么？



编辑：这是因为我在第一个x.room_type_id中有两个夏季计划。我可以加入plan_name和plan_type，并在夏季计划（CP）和夏季计划（EP）等选项中显示。我认为它会这样工作

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?

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

推荐答案

index}}class =pull-right>房间详细信息< / a>
< / div>
< h5 class =pull-right> {{x.rack_price}}< br>每间客房每晚< / h5>
< img id =roomImgng -src ={{x.room_image}}ng-init = fetchImage（x）>

< div class =row>

< select ng-model =selvalueng-change =setPrice（）ng-init = fetchPlan（x）>
< option ng-repeat =y in x.plan_name track by

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>

index">{{y}}</option> </select> <h4>{{book_status}}</h4> </div> <h3> ₹ {{x.rack_price}} </h3> <h3>₹ {{x.price}}</h3> </div> </div>

这是roomdata GET方法

Here's the roomdata GET method

http（{
method：'GET'，
url：'& hotel_id ='+

http({ method:'GET', url: '&hotel_id=' +

这篇关于如何根据选择标记中的ng-repeat显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！