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