我正在其他页面上使用这种方式，并且表单工作正常。但使用以下 HTML 和 AngularJS 代码，表单针对 JSON 中的每个键返回空值。
表单提交时返回 JSON:
{
"name":"",
"description":"",
"daystart":"",
"dayend":"",
"sendbusytone":"",
"divertto":"",
"extension":"",
"password":"",
"registrar":"",
"secregistrar":"",
"port":"",
"realem":"",
"maxcalls":"",
"busytone":"",
"diverttofor":"",
"divertbusytune":"",
"diverttoqns":""
}
HTML:
<div class="content">
<form method="post" id="queue_form" name="queue_form1" ng-submit="addqueue()">
<div class="scrollable">
<div class="section1">
<div class="content_left">
<div id="content_left_header">
<div class="header_left_side">
<img src="Images/queue_info.png" />
<span class="header_text_info">Queue Information</span>
</div>
<div class="header_right_side">
<img src="images/minus_icon.png" />
</div>
</div>
<div id="content_name" class="w-330 m-t22">
<label class="input_text">Name</label>
<input type="text" name="name" ng-model="name" placeholder="name" class="w_140 text-field" required />
</div>
<div id="content_select" class="w-330">
<label class="input_text">Site</label>
<select class="select_width">
<option name="Type1">Type 1</option>
<option name="Type2">Type 2</option>
<option name="Type3">Type 3</option>
</select>
</div>
<div id="content_textarea" class="w-330">
<label class="input_text">Description</label>
<textarea class="textarea_h_w" name="description" ng-model="description" required></textarea>
</div>
</div>
<div class="qns">
<div id="content_right_header">
<div class="header_left_side">
<img src="Images/queuenservice.png" />
<span class="header_text_ser">Queue Night Service</span>
</div>
<div class="header_right_side">
<img src="images/minus_icon.png" />
</div>
</div>
<div class="content_extension w-330 m-t22">
<label class="input_text">Day Start</label>
<input type="text" name="daystart" ng-model="daystart" class="w_140 text-field" required />
</div>
<div class="content_extension w-330">
<label class="input_text">Day End</label>
<input type="text" name="dayend" ng-model="dayend" class="w_140 text-field" required />
</div>
<div class="max-calls">
<label class="maxcall-lbl">Divert Settings</label>
<div class="content_extension w-330">
<input type="radio" class="radio-option" name="sendbusytone" ng-model="sendbusytone" />
<span class="input_name">Send busy tone</span>
</div>
<div class="content_divert w-330">
<input type="radio" class="radio-option m-l20" />
<span class="radio_txt">Divert to</span>
<input type="text" name="text" class="divert-text" ng-model="diverttoqns" required />
</div>
</div>
</div>
</div>
<div class="section2">
<div class="content_right">
<div id="Div1">
<div class="header_left_side">
<img src="Images/profile.png" />
<span class="header_text_agent">Profile</span>
</div>
<div class="header_right_side">
<img src="Images/minus_icon.png" />
</div>
</div>
<div class="content_right_left">
<div class="content_extension w-330 m-t22">
<label class="input_text">Extension</label>
<input class="w_140 text-field" type="text" name="extension" ng-model="extension" required />
</div>
<div class="content_extension w-330">
<label class="input_text">Password</label>
<input class="w_140 text-field" type="password" name="password" ng-model="password" required />
</div>
<div class="content_extension w-330">
<label class="input_text">Registrar</label>
<input class="w_140 text-field" type="text" name="registrar" ng-model="registrar" required />
</div>
<div class="content_extension w-330">
<label class="input_text">Sec.Registrar</label>
<input class="w_140 text-field" type="text" name="secregistrar" ng-model="secregistrar" required />
</div>
<div class="content_extension w-330">
<label class="input_text">Transport Meidum</label>
<select class="option_width">
<option name="UDP">UDP</option>
<option name="EDP">EDP</option>
<option name="CSS">CSS</option>
</select>
</div>
<div class="content_extension w-330">
<label class="input_text">Port</label>
<input type="text" name="port" class="w_140 text-field" ng-model="port" required />
</div>
<div class="content_extension w-330">
<label class="input_text">proxy</label>
<input type="text" name="proxy" class="w_140 text-field" ng-model="proxy" required />
</div>
<div class="content_extension w-330">
<label class="input_text">Category</label>
<select class="select_width">
<option name="Internal" value="1">Internal</option>
<option name="External" value="2">External</option>
</select>
</div>
<div class="content_extension w-330">
<label class="input_text">Realm</label>
<input type="text" name="realem" class="w_140 text-field" ng-model="realem" required />
</div>
</div>
</div>
</div>
<div class="section3">
<div class="content_thersholds">
<div id="Div2">
<div class="header_left_side">
<img src="Images/queue_threshold.png" />
<span class="header_text_ext">Thersholds</span>
</div>
<div class="header_right_side">
<img src="images/minus_icon.png" />
</div>
</div>
<div class="max-calls m-t22">
<label class="maxcall-lbl">Maximum Calls - Divert Settings</label>
<div class="content_extension w-330">
<label class="max_calls">Maximum Calls</label>
<input type="text" name="maxcalls" class="w_140 text-field" ng-model="maxcalls" required />
</div>
<div class="content_extension w-330">
<input type="radio" class="radio-option" name="busytone" ng-model="busytone" required />
<span class="input_name">Send busy tone</span>
</div>
<div class="content_divert w-330">
<span class="radio_txt">Divert to</span>
<input type="text" class="divert-text" name="diverttofor" ng-model="diverttofor" required />
</div>
</div>
<div class="max-calls">
<label class="maxcall-lbl">NO Operators-Divert Settings</label>
<div class="content_extension w-330">
<input type="radio" class="radio-option" name="divertbusytune" ng-model="divertbusytune" />
<span class="input_name">Send busy tone</span>
</div>
<div class="content_divert w-330">
<input type="radio" class="radio-option m-l20" />
<span class="radio_txt">Divert to</span>
<input type="text" name="text" class="divert-text" name="diverttoqns" ng-model="diverttoqns" required />
</div>
</div>
</div>
</div>
<div class="action-btns">
<input type="submit" value="Update" class="btnStyle" />
<input type="button" value="Cancel" class="btnStyle" />
</div>
</div>
</form>
</div>
AngularJS 代码:
$scope.addqueue = function () {
AddQueue.save({ 'name': $sanitize($scope.name),
'description': $sanitize($scope.description),
'daystart': $sanitize($scope.daystart),
'dayend': $sanitize($scope.dayend),
'sendbusytone': $sanitize($scope.sendbusytone),
'divertto': $sanitize($scope.divertto),
'extension': $sanitize($scope.extension),
'password': $sanitize($scope.password),
'registrar': $sanitize($scope.registrar),
'secregistrar': $sanitize($scope.secregistrar),
'port': $sanitize($scope.port),
'realem': $sanitize($scope.realem),
'maxcalls': $sanitize($scope.maxcalls),
'busytone': $sanitize($scope.busytone),
'diverttofor': $sanitize($scope.diverttofor),
'divertbusytune': $sanitize($scope.divertbusytune),
'diverttoqns': $sanitize($scope.diverttoqns)
},
function (response) {
alert($scope.name);
console.log($scope.name);
console.log(AddQueue);
var path = '/layout';
console.log(angular.fromJson(response));
$scope.result_addqueue = response;
if ($scope.result_addqueue.status == true) {
} else {
$scope.msg = $scope.result_addqueue.message;
}
$location.path(path);
$scope.loadMenu();
$scope.loadQueues();
});
};
最佳答案
我将创建一个名为 queue 或 queueItem 的模型，并在该模型上添加属性，而不是直接在范围上执行。关于“点”及其在范围内的使用已经有很多帖子。因此，首先，将所有内容放在不直接更改的对象上。
HTML 中的示例
<input type="text" class="divert-text" name="diverttofor" ng-model="queueItem.diverttofor" required />
而且你的保存也会容易得多:
$scope.addqueue = function () {
AddQueue.save($scope.queueItem, function (response) {
console.log(response); // If you use Chrome, you don't need to stringify this.
});
};
旁注，考虑(如果您是作者)更改 AddQueue.save 以使用 promises相反，您可以链接结果/响应。
您可以做的另一件事是更改代码以使其更加模块化。您可以让 $scope.addqueue 传递对该对象的引用，而不是直接处理 $scope.queueItem。我看到您的页面实际上正在提交，这可能是导致您出现问题的原因，提交将清除页面。
您可以将提交更改为此(不要使用type="submit"):
<input type="button" value="Update" class="btnStyle" ng-click="addqueue(queueItem)" />
并将您的添加队列更改为:
$scope.addqueue = function (queueItem) {
AddQueue.save(queueItem, ...
关于javascript - AngularJS:表单提交不返回 JSON 中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28762687/