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:

User selects a project.(Populated on page load by a call to my API).
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.
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.

Try doing $scope.projectIDSelected = function(){... instead. — Karl Reid
– Karl Reid, Commented May 12, 2017 at 17:39

Patrick Barr · Accepted Answer · 2017-05-12 17:47:24Z

4

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

edited May 12, 2017 at 17:47

answered May 12, 2017 at 17:40

Patrick Barr

1,1137 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jackfrost5234 Over a year ago

Thanks, altering this.projectIDSelected = function {...} to: $scope.projectIDSelected = function {...} worked.

Collectives™ on Stack Overflow

Trigger a function when user makes dropdown menu selection

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related