Encountering a problem where a function is returning 'undefined' in a select field.
<select name="supervisor"
ng-model="editJudge.superID"
ng-options="supervisor.legalProID as supervisor.fullName for supervisor in supervisors"
class="form-control">
This is the function used to load supervisors.
function getLegalProfessionalsBroken() {
LegalProfessionalResource.query({isValid: true}).$promise.then(function(legalProfessionals) {
$scope.supervisors = _.map(legalProfessionals, function(legalProfessional) {
return new LegalProfessional(legalProfessional);
});
});
}
Here's the definition of my LegalProfessional class.
function LegalProfessional(obj) {
var properties = $.extend({
legalProID: null,
firstName: null,
lastName: null,
middleName: null,
email: null,
isActive: true,
insertedDate: null,
insertedBy: null,
modifiedDate: null,
modifiedBy: null,
deletedDate: null,
deletedBy: null,
typeID: null,
superID: null
}, obj);
this.legalProID = properties.legalProID;
this.firstName = properties.firstName;
this.lastName = properties.lastName;
this.middleName = properties.middleName;
this.email = properties.email;
this.isActive = properties.isActive;
this.insertedDate = properties.insertedDate;
this.insertedBy = properties.insertedBy;
this.modifiedDate = properties.modifiedDate;
this.modifiedBy = properties.modifiedBy;
this.deletedDate = properties.deletedDate;
this.deletedBy = properties.deletedBy;
this.typeID = properties.typeID;
this.superID = properties.superID;
}
LegalProfessional.prototype = {
fullName: function() {
return this.lastName + ', ' + this.firstName;
}
};
Trying to resolve the issue of getting 'undefined' for all options when running as per the initial setup. When a breakpoint is added, it seems that the 'this' reference is scoped incorrectly to the HTML element rather than being associated with the LegalProfessional class.
By removing the fullName function from the LegalProfessional class and adjusting the getLegalProfessionals function to manually add fullName, the issue is resolved.
function getLegalProfessionals() {
LegalProfessionalResource.query({isValid: true}).$promise.then(function(legalProfessionals) {
$scope.supervisors = _.map(legalProfessionals, function(legalProfessional) {
return new LegalProfessional(legalProfessional);
});
$scope.supervisors.forEach(function(supervisor) {
supervisor.fullName = function() {
return supervisor.lastName + ', ' + supervisor.firstName;
};
});
});
}
Through both approaches, a breakpoint in the controller shows that $scope.supervisors[0].fullName() returns the expected value.
Preferably sticking with the initial method to maintain consistency across multiple areas of the application. Recognize it may be a scope issue with ng-repeat, seeking a solution to address it.