javascript - AngularJS:表单提交不返回 JSON 中的值

Question

我正在其他页面上使用这种方式，并且表单工作正常。但使用以下 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();

    });
};

Answer 1

我将创建一个名为 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, ...