如何訪問Angular.js控制器中的選定選項

Question

我有兩個選擇，第二個的內容必須取決於第一次選擇時的選擇值。 例如，我想加載提供特定服務（在第一個<select >中<select> ）的公司列表（到第二個<select >）：

<div ng-controller="GetCompaniesByService as class">
    <select ng-options="service.name for service in class.services"  ng-model="selectedService"></select> 
    Chosen service_id: {{ selectedService.id }}
    <select ng-options="company.name for company in class.companies"  ng-model="selectedCompany"></select> 
  </div>

如何從模型訪問控制器當前的selectedService.id值？ Е.g我需要像這樣從url通過ajax動態加載數據

$http.get('http://127.0.0.1:3000/service/'+selectedService.id)

在第二個<select>使用它

Answer 1

您必須在控制器范圍內注意selectedService。 首先將selectedService的值初始化為“ false”，然后當用戶更改選項時，selectedService將獲取select的值。

一旦selectedService的值不同於“ false”，請顯示第二個選擇/選項。

您的html：

<div ng-controller="GetCompaniesByService as class">
    <select ng-options="service as service.name in class.services"  ng-model="selectedService"></select> 
Chosen service_id: {{ selectedService.id }}
    <select ng-options="company as company.name in class.companies"  ng-model="selectedCompany" ng-show="selectedService"></select> 
</div>

您的控制器：

app.controller('GetCompaniesByService',function($scope){
    $scope.class = {};                  //initialize the class object
    $scope.class.services = [...];      //your first $http request
    $scope.selectedService = false;
    $scope.class.companies = function(){
        if(selectedService){
            return $http.get('http://127.0.0.1:3000/service/'+selectedService.id)
             .success(function(data){return data;})
             .error(function(error){return [];});
        }
        else{
            return [];
        }
    };
});