Elementwert auswählen, der nicht mit anderen Formularelementen in Angular gesendet wird

Question

Ich verwende Angular, um den Inhalt eines Formulars an einen API-Endpunkt zu senden. Alles hat gut funktioniert, bis ich versucht habe, eines der Texteingabefelder in ein Auswahldropdown zu ändern. Ich benutze ng-options, um die Select-Dropdownliste zu füllen, aber wenn ich gehe, um den Formularinhalt an den API-Endpunkt zu senden, wird der Wert des select-Elements nicht gesendet. Im Folgenden finden Sie den HTML-Code (wobei die Informationen zur Klasse und zum Styling aus Platzgründen entfernt sind) und den Winkelwert.

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> 

Angular

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

Wenn ich die Nutzlast inspizieren, um die API zwei der Formelemente vorhanden sind, gesendet werden (employeeName und salary) jedoch Abteilung nicht vorhanden ist. Ich definierte self.form.department als ng-model für das select Element, warum wird es nicht als Teil der Formularsammlung übergeben?

Answer 1

Versuchen Sie, diese

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