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 두 가지로 전송 페이로드를 검사
은 (employeeName
및
salary
) 그러나 부서가 존재하지 않는 존재한다.
select
요소에 대해 을
ng-model
으로 정의했는데 양식 컬렉션의 일부로 제출되지 않은 이유는 무엇입니까?
와우! 그것은 트릭을했다. 나는 왜 그런지 모르겠다. 내가'dept.name as dept.name'을 가졌기 때문입니까? 소문자'이름'이 문제였습니까? – webworm
'name'은'departmentList'의 열쇠입니다. –
@hadiJz 감사합니다. self.departmentList에서 "ng-options ="dept.name을 부서명으로 사용하지 않는 이유는 무엇입니까? – webworm