javascript - 如何访问 Angular.js Controller 中的选定选项

Question

我有两个选择，第二个的内容必须取决于第一个选择时选择的值。例如。我想加载提供特定服务的公司列表(到第二个 <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>

如何在 Controller 中访问模型中当前的 selectedService.id 值？ Е.g 我需要通过 ajax 从这样的 url 动态加载数据

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

第二次使用它 <select>

Answer 1

您必须在 Controller 范围内监视 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>

您的 Controller :

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