I have a collection of objects with both name and url properties. Utilizing ng-options, I am able to present the name property of each object in a select list.
Subsequently, I utilize ng-change to trigger a function with the selected object's url as the argument. Although there are no errors during execution, upon logging the passed argument within the function after calling it, the result is undefined. It seems that something is amiss in passing the url as an argument. Assistance in determining the correct approach would be greatly appreciated.
Below is the provided HTML:
<div ng-controller="TaskChartCtrl">
<select ng-model="selectedP" ng-options="project as project.name for project in projectList" ng-change="populateGraphs(project.url)">
<option value="">Select A Project</option>
</select>
</div>
And here is the code for the controller:
mod.controller("TaskChartCtrl", ["$scope", "$http", function ($scope, $http) {
$scope.projectList = [];
$http.get('https://api.freeagent.com/v2/projects', config).then(function(response) {
$scope.projectList = response.data.projects;
});
$scope.populateGraphs = function(projectUrl) {
console.log(projectUrl);
$scope.selectedP = projectUrl;
//REMAINING FUNCTION CODE UTILIZING $scope.selectedP
}
An illustration of projectList post retrieval:
$scope.projectList = [{
'name':'projectName',
'url':'projectUrl'
}, {
'name':'projectName2',
'url':'projectUrl2'
}, {
...
}]
Any form of guidance would be highly valued.