Create a drop-down list from one relationship to another with AngularJS and Web API

advertisements

I have 2 tables in my database: People and Payband. I'll give a reduced version of the relationship below:

dbo.People

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

dbo.Paybands

Id : int (PK)
Name : string

So I've created an ASP.NET Web API service for my backend and using HTML/CSS and AngularJS for my front-end. I'm able to pull, display and edit data no problem. Here's an image of what my form looks like:

I'm able to get the current Payband value that's assigned to a person, the only problem is that I'm unable to get all the other Payband values and display them in the HTML dropdown so that you can easily change the payband for any given person. I'm at a loss for how to achieve what I'm trying to do, so if someone can help me with this, I'd really appreciate it. Thank you in advance and if you have any other questions, please ask away.

Also, here's my AngularJS controller (yes, I'm currently hardcoding the Id of the person for testing):

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 = "";
};

}


As mentioned you need to have an endpoint on the server that will publish the list of paybands, ie a controller named PaybandsController in the controller you will need a Get action result that returns a list of Paybands from your database. Your paybandResource should be glued to this and publish using the query function. You would then hook up that vm.paybands to the UI as Yaser indicated.

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

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

 //.......

In the view

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