当用户进行下拉菜单选择时触发功能

Question

我正在开发项目管理应用程序。每个项目都有一个与之关联的任务列表。我目前正在尝试让修改任务页面正常工作。这个想法是：

用户选择一个项目。（通过调用我的 API 在页面加载时填充）。
当用户选择项目时，会触发一个函数来创建另一个调用我的 API 以填充我的任务下拉菜单。
用户选择要修改的任务。

目前我在执行第 2 步时遇到问题。

我的代码：

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>

控制器:

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);

            }
      )
 }

问题是 projectIDSelected 函数从未触发，因此 $scope.dbTasks 从未获取数据，因此前端的下拉菜单保持空白。

Answer 1

this 不是指 $scope

所以您要么必须在 html 中引用控制器，例如 ng-controller="Controller as ctrl" ng-change="ctrl.projectIDSelected()"，要么您需要将 projectIDSelected 定义为 $scope.projectIDSelected = function() { ... }

我看不到你的控制器是什么样子，但要使用 $scope 你需要在定义控制器时注入它：angular.module('app').controller('Controller', ['$scope', function($scope) { ... }]);

就个人而言，当我在我的控制器中创建变量和函数时，我倾向于使用 $scope 来定义将在 HTML 和 this 上使用的内容作为后台函数/数据过于具体，无法作为服务

当用户进行下拉菜单选择时触发功能

Trigger a function when user makes dropdown menu selection

javascript

angularjs

angularjs-scope