Reputation: 33
I have an array of objects that each have a name and url property. I am using ng-options to display the name property of each object in a select list.
I am then using ng-change to invoke a function with the url of the selected object as the function argument. When executing this I am not getting any errors, but when console logging the passed argument in the function after invocation, it returns undefined. So something with passing the url as argument is not working. It would be great if someone could point me into the right direction.
Here comes the 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>
This is the controller code:
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;
//REST OF FUNCTION CODE USING $scope.selectedP
}
Sample of projectList after get has returned:
$scope.projectList = [{
'name':'projectName',
'url':'projectUrl'
}, {
'name':'projectName2',
'url':'projectUrl2'
}, {
...
}]
Any help would be appreciated.
Upvotes: 0
Views: 3770
Reputation: 14455
Try:
ng-change="populateGraphs(selectedP.url)"
The model of the select is selectedP
, so you want to get the selected value from there.
Upvotes: 1