当用户进行下拉菜单选择时触发功能
Trigger a function when user makes dropdown menu selection
我正在开发项目管理应用程序。每个项目都有一个与之关联的任务列表。
我目前正在尝试让修改任务页面正常工作。这个想法是:
用户选择一个项目。(通过调用我的 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
从未获取数据,因此前端的下拉菜单保持空白。
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
上使用的内容作为后台函数/数据过于具体,无法作为服务
我正在开发项目管理应用程序。每个项目都有一个与之关联的任务列表。 我目前正在尝试让修改任务页面正常工作。这个想法是:
用户选择一个项目。(通过调用我的 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
从未获取数据,因此前端的下拉菜单保持空白。
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
上使用的内容作为后台函数/数据过于具体,无法作为服务