Question

我的問題是


由deafult我得到的結果爲第一家酒店，如何通過使用angularjs指令得到onchange酒店下拉結果？

我的代碼

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

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

通過deafult我得到的結果爲1號酒店，如何使用angularjs指令得到的onchange酒店下拉的結果嗎？

Answer 1

您可以使用ng-model指令將選定值存儲在作用域中，並使用ng-change以模型值作爲參數觸發ajax查詢。

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

Answer 2

你必須做在這些線路上的東西。

1. 使用ng-options填充酒店列表
2. 使用ng-model到選定值綁定到某個變量
3. 使用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> 

和控制器可能是這樣。

1. 將$ scope.hotels與酒店ID和名稱數組混淆。
2. 定義一個獲取酒店信息的函數。

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

    } 
}); 

（複製粘貼代碼可能無法正常工作）

希望這有助於！