一个ng选项取决于在另一个中选择什么 - AngularJS

Question

我在AngularJS中有一个表单，其中一个下拉列表的选项取决于第一个选择的选项。

<select ng-options="obj.name for obj in institutions track by obj.id" ng-model="newUser.institution"> 
</select> 

<input type="text" name="email" ng-model="newUser.email"> 

<!-- DEPENDENT on what is selected in the previous dropdown --> 
<select ng-options="obj.name for obj in organizations track by obj.id" ng-model="newUser.associatedOrg"> 
</select> 

机构都装满了从数据库中的可用机构的蝙蝠。即在控制器做过这样的：

function populate() { 
    return Institutions.all().then(function (institutions) { 
     $scope.institutions = institutions; 
     return institutions; 
    }); 
} 

// at the end of the controller 
populate(); 

然而，在第二个下拉的“组织”是基于他们的父表的机构，所以我需要一个选项后做类似的东西$scope.organizations = institution.memberOrganizations;控制器从第一个下拉列表中选择。

现在，只是为了确保工作的事情，我做了一个名为“加载组织”按钮与ng-click此功能：

$scope.getOrganizationsOnCampus = function(institution) { 
    $scope.organizations = institution.memberOrganizations; 
}; 

这样的作品，但是这是一个非常糟糕的用户体验。

所以我的问题是：每次选择新机构时，如何更新$scope.organizations？

我想这样做不听的DOM - 就像你在jQuery的会，因为我知道这是对AngularJS最佳实践方式。

P.S.为了进一步清晰起见，以下是之前的屏幕截图，之后单击“加载组织”按钮以加载所选机构的子组织。这是我希望每次在上一个选项中选择不同机构时自动执行的操作。

前

后

Answer 1

你会用ng-change这样的：

<select ng-options="obj.name for obj in institutions track by obj.id" ng-model="newUser.institution" ng-change"updateOrg(newUser.institution)"> 
</select> 

，然后在你的控制器，你有这样的函数：

$scope.updateOrg = function(institution) { 
    $scope.organizations = institution.memberOrganizations; 
};