2017-02-15 5 views
0

각도를 사용하여 양식의 내용을 API 끝점에 제출합니다. 텍스트 입력 필드 중 하나를 선택 드롭 다운으로 변경하려고 시도 할 때까지 모든 것이 올바르게 작동했습니다. 선택 드롭 다운 채우기 위해 ng-options 사용하고 있습니다. 그러나 API 끝점에 양식 내용을 보내러 갈 때 select 요소의 값이 보내지지 않습니다. 다음은 HTML (간결성을 위해 클래스 및 스타일 정보가 삭제됨) 및 각도입니다.각도 요소로 다른 요소 요소와 함께 전송되지 않는 요소 값 선택

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) 그러나 부서가 존재하지 않는 존재한다. select 요소에 대해 을 ng-model으로 정의했는데 양식 컬렉션의 일부로 제출되지 않은 이유는 무엇입니까?

답변

1

변경 시도이

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

와우! 그것은 트릭을했다. 나는 왜 그런지 모르겠다. 내가'dept.name as dept.name'을 가졌기 때문입니까? 소문자'이름'이 문제였습니까? – webworm

+0

'name'은'departmentList'의 열쇠입니다. –

+0

@hadiJz 감사합니다. self.departmentList에서 "ng-options ="dept.name을 부서명으로 사용하지 않는 이유는 무엇입니까? – webworm