我的数据库中有2个表:People和Payband。我将在下面给出简化的关系:

dbo.People

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


dbo.Paybands

Id : int (PK)
Name : string


因此,我为后端创建了ASP.NET Web API服务,并为前端使用了HTML / CSS和AngularJS。我能够拉,显示和编辑数据没问题。这是我的表单外观的图像:

javascript - 使用AngularJS和Web API从一对多关系创建下拉列表-LMLPHP

我能够获取分配给某人的当前Payband值,唯一的问题是我无法获取所有其他Payband值并将其显示在HTML下拉列表中,因此您可以轻松更改任意给定的Payband人。我对如何实现自己想做的事情不知所措,因此,如果有人可以帮助我,我将非常感激。预先谢谢您,如果还有其他疑问,请离开。

另外,这是我的AngularJS控制器(是的,我目前正在对要测试的人的ID进行硬编码):

angular
.module("personnelService")
.controller("PersonnelEditCtrl",
             PersonnelEditCtrl);

function PersonnelEditCtrl(personnelResource) {
var vm = this;
vm.person = {};
vm.message = '';

personnelResource.get({ id: 2 },
    function (data) {
        vm.person = data;
        vm.person.dob = new Date(vm.person.dob);
        vm.originalPerson = angular.copy(data);
    });

if (vm.person && vm.person.personId) {
    vm.title = "Edit: " + vm.person.firstName + " " + vm.person.lastName;
}
else {
    vm.title = "New Person";
}

vm.submit = function () {
    vm.message = '';
    if (vm.person.personId) {
        vm.person.$update({ id: vm.person.personId },
            function (data) {
                vm.message = '... Save Complete';
            })
    }
    else {
        vm.person.$save(
            function (data) {
                vm.originalPerson = angular.copy(data);
                vm.message = '... Save Complete';
            })
    }
};

vm.cancel = function (editForm) {
    editForm.$setPristine();
    vm.person = angular.copy(vm.originalPerson);
    vm.message = "";
};


}

最佳答案

如前所述,您需要在服务器上拥有一个发布工资带列表的终结点,即控制器中名为PaybandsController的控制器,您将需要Get操作结果,该结果从数据库中返回工资带列表。应该将您的paybandResource粘贴到此,并使用查询功能进行发布。然后,您将按照Yaser指示将vm.paybands连接到UI。

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>

10-05 20:43
查看更多