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兩個有效載荷的存在(employeeName
和salary
)然而部不存在。我將self.form.department
定義爲select
元素的ng-model
,爲什麼它不作爲表單集合的一部分提交?
哇!那就是訣竅。雖然我不知道爲什麼。是因爲我有'dept.name作爲dept.Name'嗎?小寫的'name'是個問題嗎? – webworm
'name'是'departmentList'的關鍵字 –
謝謝@hadiJz但我還是不明白。爲什麼ddn't'ng-options =「dept.name作爲dept.Name在self.departmentList中的dept」'不工作? – webworm