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一起工作的承诺 ，而不是，所以你可以链接结果/响应。

您可以做的另一件事是将代码更改为更具模块化。 不必直接在$ scope.queueItem上工作，您可以让$ scope.addqueue传递对该对象的引用。 我看到您的页面实际上正在提交， 这可能是您遇到问题的原因 ，提交将清除该页面。

您可以将提交更改为此（不要使用type="submit" ）：

<input type="button" value="Update" class="btnStyle" ng-click="addqueue(queueItem)" />

并更改您的添加队列：

$scope.addqueue = function (queueItem) {
  AddQueue.save(queueItem, ...