我正在开发一个项目管理应用程序。每个项目都有一个与其关联的任务列表。 我目前正在尝试使修改任务页面正常工作。这个想法是:
用户选择一个项目。(通过调用我的 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>
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);
}
)
}
问题是projectIDSelected函数永远不会触发,因此$scope.dbTasks永远不会获取数据,因此前端的下拉菜单保持空白。
最佳答案
this
不引用 $scope
因此,您必须在 html 中引用 Controller ,例如 ng-controller="Controller as ctrl"
ng-change="ctrl.projectIDSelected()"
或您需要将 projectIDSelected
定义为 $scope.projectIDSelected = function() { ... }
我无法看到您的 Controller 是什么样子,但要使用 $scope
您需要在定义 Controller 时注入(inject)它:angular.module('app') .controller('Controller', ['$scope', function($scope) { ... }]);
就个人而言,当我在 Controller 中创建变量和函数时,我倾向于使用 $scope
来定义将在 HTML 上使用的内容,并使用 this
作为后台函数/数据过于具体,无法作为服务
关于javascript - 当用户选择下拉菜单时触发函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43943528/