當用戶進行下拉菜單選擇時觸發一個功能

我正在開發項目管理應用程序。每個項目都有一個與之相關的任務清單。我目前正試圖讓修改任務頁面正常工作。這個想法是：當用戶進行下拉菜單選擇時觸發一個功能

用戶選擇一個項目（通過調用我的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永遠不會獲取數據，所以前端的下拉菜單保持空白。

來源

2017-05-12 jackfrost5234

請嘗試執行'$ scope.projectIDSelected = function（）{...'來代替。 –

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上使用什麼，因爲後臺功能/數據過於具體以至於無法用作服務

來源

2017-05-12 17:40:11

謝謝，改變 this.projectIDSelected =功能{...} 到： $ scope.projectIDSelected =功能{...} 工作。 – jackfrost5234

當用戶進行下拉菜單選擇時觸發一個功能

回答

相關問題