2017-02-15 28 views
0

我正在使用Angular將表單的內容提交給API端點。一切工作正常,直到我試圖將其中一個文本輸入字段更改爲選擇下拉列表。我使用ng-options填充選擇下拉菜單,但是當我將表單內容發送到API端點時,不會發送select元素的值。下面是HTML(爲簡潔起見刪除了類和樣式信息)和Angular。選擇不與Angular中的其他表單元素一起發送的元素值

HTML

<form ng-submit="self.addNewEmployee()" novalidate> 
    <input ng-model="self.form.employeeName" type="text"> 
    <select ng-model="self.form.department" ng-options="dept.name as dept.Name for dept in self.departmentList"> 
    </select> 
    <input ng-model="self.form.salary" type="text" /> 
    <input id="btnSubmit" type="submit" value="Add Employee" /> 
</form> 

<script type="text/javascript"> 
    var adminToolApp = angular.module('adminToolApp', []); 

    adminToolApp .controller('AdminToolController', function ($scope, $http) { 
     var self = this; 
     self.departmentList = []; 

     // Gets all departments to populate select input 
     $http({ 
      method: 'GET', 
      url: 'https://api.myServer.net/api/getAllDepartments', 
      headers : { 
       'Content-Type': 'application/json', 
      } 
     }).then(function(result) { 
      self.departmentList = result.data; 
     }, function (error) { 
      console.log(error); 
     }); 

     // Submits form data to add new employee 
     self.addNewEmployee = function() { 
      return $http({ 
       method: 'POST', 
       url: 'https://api.myServer.net/api/addNewEmployee', 
       data: angular.toJson(self.form), 
       headers: { 
        'Content-Type': 'application/json', 
       } 
      }).then(_submissionSuccess, _submissionFailure); 
     }; 

     // Private methods 

     function _submissionSuccess(response) { 
      self.submissionResults = response.data; 
     }; 

     function _submissionFailure(response) { 
      self.submissionResults = 'An error occured: ' + response.status; 
     }; 
    }); 
    </script> 

當我檢查發送到形式爲元素的API兩個有效載荷的存在(employeeNamesalary)然而部不存在。我將self.form.department定義爲select元素的ng-model,爲什麼它不作爲表單集合的一部分提交?

回答

1

嘗試改變這種

ng-options="dept.Name as dept.Name for dept in self.departmentList"> 
+0

哇!那就是訣竅。雖然我不知道爲什麼。是因爲我有'dept.name作爲dept.Name'嗎?小寫的'name'是個問題嗎? – webworm

+0

'name'是'departmentList'的關鍵字 –

+0

謝謝@hadiJz但我還是不明白。爲什麼ddn't'ng-options =「dept.name作爲dept.Name在self.departmentList中的dept」'不工作? – webworm

相關問題