Question

我的问题是

通过deafult我得到第一家酒店的结果，如何通过使用angularjs指令获得酒店下拉的更改结果？

我的代码

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app='myApp' ng-controller='HttpController'>
   {{detail.name}} <br/>
   {{detail.address}} <br/>
   {{detail.country}}<br/>
</div>

<script>
    var hotelid=$('select#hotel_property option:selected').val();

        var data = {};
        data.Hotelid = hotelid;
        data.Action = "hotel_property";

        var helloApp = angular.module("myApp", []);

        helloApp.controller("HttpController", function($scope, $http) {
                $http({
                    method: 'POST',
                    datatype:"json",
                    header: {
                        "contentType": 'application/json'
                    },
                    data: JSON.stringify(data),
                    url: '/ajax',
                }).success(function(data, status, headers, config) {
                    $scope.detail = data.hotel_details;
                }).error(function(data, status, headers, config) {
                    alert( "failure");
                });
        });

    </script>

＆＃13;

<select id="hotel_property">
	<option value="111">Taj hotel</option>
	<option value="222">oberoi</option>
	<option value="333">JW marriot</option>
	<option value="444">Grand Maratha</option>
</select>

＆＃13;

通过deafult我得到第一家酒店的结果，如何通过使用angularjs指令获得酒店下拉的更改结果？

Answer 1

你必须在这些方面做点什么。

使用ng-options填充酒店列表
使用ng-model将所选值绑定到某个变量
使用ng-change触发处理更改的功能。

   <select id="hotel_property" ng-model="selectedHotel" 
        ng-change="fetchInfo(selectedHotel)" 
        ng-options="hotel.name for hotel in hotels">
       <option value="">-- please select -- </option>
   </select>

，您的控制器可能看起来像这样。

使用酒店ID和名称数组来定义$ scope.hotels。
定义一个获取酒店信息的功能。

 helloApp.controller("HttpController", function($scope, $http) {
  $scope.hotels = [{
    id: 111, 
    name:'Taj hotel'
  },{
    id: 222, 
    name:'oberoi'
  },{
    id: 333, 
    name:'JW marriot'
  },{
    id: 444, 
    name:'Grand Maratha'
  }];
  $scope.fetchHotelInfo(hotel){

    var data = {};
    data.Hotelid = hotel.id;
    data.Action = "hotel_property";


    $http({
      method: 'POST',
      datatype:"json",
      header: {
        "contentType": 'application/json'
      },
      data: JSON.stringify(data),
      url: '/ajax',
    }).success(function(data, status, headers, config) {
      $scope.detail = data.hotel_details;
    }).error(function(data, status, headers, config) {
      alert( "failure");
    });

  }
});

（复制粘贴代码可能不起作用）

希望这有帮助！

Answer 2

您可以使用ng-model指令将所选值存储在作用域中，并使用ng-change以模型值作为参数触发ajax查询。

https://docs.angularjs.org/api/ng/directive/select

如何通过angularjs调用onchange下拉列表中的ajax？

2 个答案: