SL-A-SH Ответов: 1

Как отобразить данные в соответствии с ng-repeat в теге select

Вот моя разметка. Я использую ng-repeat и использую x, чтобы передать его через функцию для извлечения данных в моем контроллере.

<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

$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 для этого

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


Вот данные JSON для plan_data для одного x. room_type_id

{
price: "["2700","2500"]",
plan_type: "["CP","EP"]",
plan_name: "["Summer Plan","Summer Plan"]",
}


и для другого x. room_type_id

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


Что я уже пробовал:

Так что в настоящее время мои параметры отображаются нормально. Но в моем {{x. price}} он отображается как 2000 в одной строке и 2700 в другой строке, что правильно. Но значение не меняется, когда я выбираю другие варианты. Что я делаю не так?

EDIT: это потому, что у меня есть два летних плана в первом x.room_type_id. Я могу присоединиться plan_name и plan_type и показать его в опциях, как летний план(КП) и летний план(ЕР). Я думаю, что это сработает именно так

1 Ответов

Рейтинг:
5

Karthik_Mahalingam

пробовать

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


Демонстрация: - JSFiddle[^]

SL-A-SH

Огромное спасибо. Эта работа

Karthik_Mahalingam

добро пожаловать

SL-A-SH

Не могли бы вы отредактировать его и сделать летний план и 2000 выбранными по умолчанию при загрузке страницы. Я попытался с помощью $охвата.selvalue = planNames[0]; но это не работает

Karthik_Mahalingam

до конца сферы применения

 $scope.selvalue = data.plan_name[0];
            $scope.price = data.price[0];

SL-A-SH

Спасибо :-)

SL-A-SH

Извините за беспокойство. Я обновил код. Не могли бы вы проверить и сказать мне, что я делаю не так? Мне действительно трудно это исправить.

Karthik_Mahalingam

в чем же проблема
я немного занят до 6 часов

SL-A-SH

Окей

Karthik_Mahalingam

в чем же проблема

SL-A-SH

Я обновил весь код. Мои значения не меняются при выборе другого варианта. Я думаю, это потому, что мой первый x.room_type_id вызывает данные, которые имеют два летних плана в своих именах планов. Проверьте обновленный код. Ты поймешь

Karthik_Mahalingam 

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

это может быть достигнуто многими способами, это один из них, пожалуйста, изучите документы angualr для получения дополнительной информации.

SL-A-SH

Хорошо большое вам спасибо

Karthik_Mahalingam

добро пожаловать