使用Angularjs发布到嵌套JSON对象

我有一个使用$http.post调用外部api的表单。它可以工作，但是，我现在需要添加地址、城市、州和邮政编码的输入字段。但是，地址的json是嵌套的，我已经尝试了所有方法来访问它，但无法访问。json现在看起来像这样。我现在需要将地址属性发布到我的表单中

{

"FirstName": "string",

"LastName": "string",

 "Address": {

    "Address1": "string",

    "Address2": "string",

    "City": "string",

    "PostalCode": "string",

    "Country": "string",

    "State": "string",
}

HTML代码：

<form novalidate="" role="form" name="prizeLogicForm" id="prizeForm" class="ng-pristine ng-invalid ng-invalid-required ng-valid-email">
            <h1 class="heading-sub-a-xl" style="margin-top: 20px; margin-bottom: 20px;">Entry Form</h1>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.FirstName.$invalid &amp;&amp; prizeLogicForm.FirstName.$dirty}">
                <label for="FirstName" class="align-form required">First Name</label>
                <input type="text" class="form-control ng-pristine ng-invalid ng-invalid-required ng-touched" id="FirstName" name="FirstName" ng-model="FirstName" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.FirstName.$error.required &amp;&amp; prizeLogicForm.FirstName.$dirty">First Name is required.</span>
            </div>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.LastName.$invalid &amp;&amp; prizeLogicForm.LastName.$dirty}">
                <label for="Lastname" class="align-form required">Last Name</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="LastName" name="LastName" ng-model="LastName" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.LastName.$error.required &amp;&amp; prizeLogicForm.LastName.$dirty">Last Name is required.</span>
            </div>


            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Address1.$invalid &amp;&amp; prizeLogicForm.Address1.$dirty}">
                <label for="Lastname" class="align-form required">Address</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="Address1" name="Address1" ng-model="Address1" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.Address1.$error.required &amp;&amp; prizeLogicForm.Address1.$dirty">Address is required.</span>
            </div>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.City.$invalid &amp;&amp; prizeLogicForm.City.$dirty}">
                <label for="City" class="align-form required">City</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="City" name="City" ng-model="City" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.City.$error.required &amp;&amp; prizeLogicForm.City.$dirty">City is required.</span>
            </div>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.State.$invalid &amp;&amp; prizeLogicForm.State.$dirty}">
                <label for="State" class="align-form required">State</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="State" name="State" ng-model="State" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.State.$error.required &amp;&amp; prizeLogicForm.State.$dirty">State is required.</span>
            </div>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Zip.$invalid &amp;&amp; prizeLogicForm.Zip.$dirty}">
                <label for="State" class="align-form required">Zip</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="Zip" name="Zip" ng-model="Zip" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.Zip.$error.required &amp;&amp; prizeLogicForm.Zip.$dirty">Zip is required.</span>
            </div>



            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Phone.$invalid &amp;&amp; prizeLogicForm.Phone.$dirty}">
                <label for="phone" class="align-form required">Phone</label>
                <input type="text" class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" id="Phone" name="Phone" ng-model="Phone" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.Phone.$error.required &amp;&amp; prizeLogicForm.Phone.$dirty">Phone is required.</span>
            </div>

            <div class="form-group" ng-class="{'has-error' : prizeLogicForm.Email.$invalid &amp;&amp; prizeLogicForm.Email.$dirty}">
                <label for="email" class="align-form required">Email</label>
                <input type="email" class="form-control ng-pristine ng-untouched ng-valid-email ng-invalid ng-invalid-required" id="Email" name="Email" ng-model="Email" ng-required="true" required="required">
                <span class="help-block ng-hide" ng-show="prizeLogicForm.Email.$error.required &amp;&amp; prizeLogicForm.Email.$dirty">Email is required.</span>
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="AgreeToRules" ng-required="true" class="align-form required ng-pristine ng-untouched ng-invalid ng-invalid-required" required="required"> <strong>I have read and agree to be bound by the Official Rules and am 21 years of age or older. <span style="color: #d13a17;">*</span></strong>
                </label>
            </div>
            <!--Remember to add newsletter option, its not added currently to the service.-->
            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="OptIn" ng-required="false" class="ng-pristine ng-untouched ng-valid ng-valid-required"> I would like to receive the Texas Tourism email newsletter and I understand that I may <a href="http://traveltex.us4.list-manage1.com/unsubscribe?u=e573ec85eee8fb1a7e9b35f86&amp;id=592bc032c8" target="_blank">unsubscribe</a> at any time. See our <a href="https://www.traveltexas.com/privacy" target="_blank">Privacy Policy</a> for more details.
                </label>
            </div>

            <br>
            <br>
            <input type="submit" class="btn btn-primary" ng-disabled="prizeLogicForm.$invalid" value="Submit" ng-click="postdata(FirstName, LastName, AgreeToRules, OptIn, Phone, Email)" disabled="disabled"> <br><br>
            <!--<input type="button" class="btn btn-secondary btn-bottom" value="Submit" ng-disabled="!checked" data-ng-click="postdata(FirstName, LastName, AgreeToRules, OptIn, Phone, Email)" /> <br /><br />-->

        </form>

---

我意识到为了解决这个问题，我必须设置var data={..}sections对象表示法，与JSON的布局方式完全相同。这使我能够成功地将邮件发送到地址1、城市、邮政编码和州。但是，$scope.postdata函数代码需要引用所有子属性，如下所示：

$scope.postdata = function (
        FirstName,
        LastName,
        AgreeToRules,
        OptIn,
        Phone,
        OtherOptIn,
        Email,
        **Address1**,
        **City**,
        **PostalCode**,
        **State**
        )

所以应该是这样的：

var data = {
            FirstName: FirstName,
            LastName: LastName,
            AgreeToRules: AgreeToRules,
            OptIn: OptIn,
            Phone: Phone,
            OtherOptIn: OtherOptIn,
            Email: Email,
            **Address**: {
                **Address1**: **Address1**,
                **City**: **City**,
                **PostalCode**: **PostalCode**,
                **State**: **State**
            }

---

我希望这能帮助任何想使用外部API发布到表单的人。

告诉我将JSON数据分配给

$scope

变量的部分。@Hoa我使用stringify（数据）在这里分配$scope.msg.data但是，出于安全原因，我删除了外部$http.post url。由于

$http.post

服务自动字符串化JavaScript对象，因此无需字符串化数据。

ng model

指令可用于对象属性，例如

ng model=“data.FirstName”

，

ng model=“数据.地址.地址1

等。。这样就不需要将单个项的列表复制到JavaScript对象。

var data = {
            FirstName: FirstName,
            LastName: LastName,
            AgreeToRules: AgreeToRules,
            OptIn: OptIn,
            Phone: Phone,
            OtherOptIn: OtherOptIn,
            Email: Email,
            **Address**: {
                **Address1**: **Address1**,
                **City**: **City**,
                **PostalCode**: **PostalCode**,
                **State**: **State**
            }