Trigger a function when user makes dropdown menu selection

Question

I'm working on an application for project management. Each project has a list of tasks associated with it. I'm currently trying to get the modify task page to work. The idea is that:

1. User selects a project.(Populated on page load by a call to my API).

2. When the user selects the project, a function fires to make another call to my API in order to populate my task drop down menu.

3. User selects a task to modify.

Currently I'm having problems with step 2.

My code:

HTML:

Project(Has ng-change directive)

<select class="form-control"  name="projectID" id="projectID"
        ng-options="project.projectName for project in dbProjects"
        ng-model="projectID"
        ng-change ="projectIDSelected()" 
         required>

Tasks(What I want populated from the projectIDSelected() function)

<select class="form-control"  name="taskName" id="taskName"
            ng-options="task.name for task in dbTasks"
            ng-model="taskName"
            required>

Controller:

this.projectIDSelected = function(){
     console.log("project id selected function has fired.");
     TaskApi.GetProjectTasks(
            {
                params: {
                    projectId: $scope.projectID.id,
                }
            },
            function(res){
                console.log("Tasks for ProjectId retrived");
                console.log(res);
                $scope.dbTasks = res.data;
            },
            //handle failure
                function(res){
                    console.log(res);

            }
      )
 }

The issue is that the projectIDSelected function is never firing, so $scope.dbTasks is never getting data, so the dropdown menu on the front end stays blank.

Answer 1

this doesn't refer to $scope

So you either have to reference the controller in your html like ng-controller="Controller as ctrl" ng-change="ctrl.projectIDSelected()" or you need to define projectIDSelected as $scope.projectIDSelected = function() { ... }

I'm not able to see what your controller looks like, but to use $scope you need to inject it when you define the controller: angular.module('app').controller('Controller', ['$scope', function($scope) { ... }]);

Personally when I create variables and functions in my controllers, I tend to use $scope to define what is going to be used on the HTML and this as background functions / data are too specific to qualify as a service