Javascript 使用AngularJS和Web API创建一对多关系下拉列表

我的数据库中有两个表：人员和工资带。我将给出以下关系的简化版本：

dbo.People

PersonId : int (PK)
FirstName : string
MiddleInitial: string
LastName : string
DateOfBirth: datetime
PaybandId : int (FK)

dbo.薪资带

Id : int (PK)
Name : string

因此，我为后端创建了一个ASP.NETWebAPI服务，并使用HTML/CSS和AngularJS作为前端。我能够拉，显示和编辑数据没有问题。以下是我的表单的图像：

我能够获取分配给某个人的当前薪资带值，唯一的问题是我无法获取所有其他薪资带值并将其显示在HTML下拉列表中，以便您可以轻松更改任何给定人员的薪资带。我不知道如何实现我的目标，所以如果有人能帮我，我会非常感激。提前感谢您，如果您有任何其他问题，请立即提问

另外，这是我的AngularJS控制器（是的，我目前正在硬编码测试人员的Id）：

---

}

您需要有一种方法来获取所有payband，然后将它们填充到该选择中

<select 
   ng-model="person.paybandId"                 
   ng-options="payband.name for payband in paybands">
</select>

---

您需要有一个方法来获取所有payband，然后将它们填充到该选择中

<select 
   ng-model="person.paybandId"                 
   ng-options="payband.name for payband in paybands">
</select>

---

如前所述，您需要在服务器上有一个端点来发布薪资带列表，即在控制器中有一个名为PaybandsController的控制器。您需要一个Get action result，从数据库返回薪资带列表。您的paybandResource应该与此绑定，并使用查询功能发布。然后，您将把vm.paybands连接到UI，如Yaser所示

function PersonnelEditCtrl(personnelResource, paybandResource, $filter) {
    var vm = this;
    vm.person = {};
    vm.message = '';
    vm.paybands = [];

    paybandResource.query(function(data) {
        vm.paybands = $filter('orderBy')(data, 'Name');
    });

 //.......

在视图中

<select 
   ng-model="person.paybandId"                 
   ng-options="payband.name for payband in paybands track by payband.id">
</select>

---

如前所述，您需要在服务器上有一个端点来发布薪资带列表，即在控制器中有一个名为PaybandsController的控制器。您需要一个Get action result，从数据库返回薪资带列表。您的paybandResource应该与此绑定，并使用查询功能发布。然后，您将把vm.paybands连接到UI，如Yaser所示

function PersonnelEditCtrl(personnelResource, paybandResource, $filter) {
    var vm = this;
    vm.person = {};
    vm.message = '';
    vm.paybands = [];

    paybandResource.query(function(data) {
        vm.paybands = $filter('orderBy')(data, 'Name');
    });

 //.......

在视图中

<select 
   ng-model="person.paybandId"                 
   ng-options="payband.name for payband in paybands track by payband.id">
</select>

确实不清楚具体问题是什么。您需要一个api端点来获取所有可用的工资带，需要一个$resource或$http来获取它们。我认为，我的问题非常清楚。如果不是，我很抱歉。我不知道如何用Paybands数据库表中的数据库条目正确填充下拉列表。例如，如果在我的工资带中（FTE，承包商），并且我正在查看的当前用户当前设置为FTE，那么当我在编辑此用户时单击下拉列表时，我希望下拉列表同时包含FTE和承包商。目前，我只能为这个用户提取“FTE”值，因为我不知道如何在AngularJS中实现这一点。真的不清楚具体的问题是什么。您需要一个api端点来获取所有可用的工资带，需要一个$resource或$http来获取它们。我认为，我的问题非常清楚。如果不是，我很抱歉。我不知道如何用Paybands数据库表中的数据库条目正确填充下拉列表。例如，如果在我的工资带中（FTE，承包商），并且我正在查看的当前用户当前设置为FTE，那么当我在编辑此用户时单击下拉列表时，我希望下拉列表同时包含FTE和承包商。目前，我只能为这个用户提取值“FTE”，因为我不知道如何在AngularJS中实现这一点。当然，我得到了控制器。在ASP.NET/MVC/WebAPI方面，我做得很好，可以向前端公开我需要的所有数据。我仍然习惯于使用AngularJS，不知道如何将两个查询合并到一个AngularJS控制器中。您是否已经创建了paybandResource？现在创建它…我将模拟我为我的人员资源创建的内容。。。（函数（）{“严格使用”；angular.module（“common.services”）.factory（“personnelResource”、[“$resource”、“appSettings”、personnelResource]）函数personnelResource（$resource、appSettings）{返回$resource（appSettings.serverPath+”/api/people/：id”，null，{update'：{method:'PUT'}}}}）；}}}（）；你必须带上$filter。我更新了代码。您也可以在服务器端或ui中进行订购。请参阅：我认为您需要按id跟踪并显示文本。我更新了答案了解更多信息查看文档查看：当然，我有控制器。在ASP.NET/MVC/WebAPI方面，我做得很好，可以向前端公开我需要的所有数据。我仍然习惯于使用AngularJS，不知道如何将两个查询合并到一个AngularJS控制器中。您是否已经创建了paybandResource？现在创建它…我将模拟我为我的人员资源创建的内容。。。（函数（）{“严格使用”；angular.module（“common.services”）.factory（“personnelResource”、[“$resource”、“appSettings”、personnelResource]）函数personnelResource（$resource、appSettings）{返回$resource（appSettings.serverPath+”/api/people/：id”，null，{update'：{method:'PUT'}}}}）；}}}（）；你必须带上$filter。我更新了代码。您也可以在服务器端或ui中进行订购。请参阅：我认为您需要按id跟踪并显示文本。我更新了答案以了解更多信息查看文档请参见：