如何使用单个AngularJS控制器将JSON对象推送到数组

Question

请指导我如何通过提交新的商品表格，在上述装货对象中推送新的商品对象。我试过的代码如下。

注意当我填写商品的形式并提交以推送上面的json时，它告诉我undefined为loads.commodities.push

我有一个完整的示例JSON对象（我们称之为加载），其中我必须推送商品对象。对于新商品，我有一个明确的表单来添加新的商品细节并推入现有的装载对象。

加载对象：

{
    "loadStops": [
        {
            "companyId": 148,
            "companyCode": null,
            "legalName": "Frontier WHSE",
            "accessorialReason": null,
            "commodities": [{
                "id": 1,
                "commodity": "Food",
                "estWeight": 20000.00
            }]
        }
    ]
}

用于查看装载数据的显示表和用于添加新商品的表单

<div ng-controller="FreightSaleCtrl">

<table>

    <tr>
        <th> Company Code </th> <th> Legal Name </th>
    </tr>
    <tr ng-repeat="theLoad in loads">
        <td> {{theLoad.companyCode}} </td>
        <td> {{theLoad.legalName}} </td>
    </tr>
    <tr>
        <td colspan="2">
            <table>
                <tr>
                    <th> Commodity </th> <th> EstWeight </th>
                </tr>
                <tr ng-repeat="cmdty in theLoad.commodities">
                    <td> cmdty.commodity </td>
                    <td> cmdty.estWeight </td>
                </tr>
            </table>
        </td>
    </tr>


</table>

</div>


<div>

<form ng-controller="FreightSaleCtrl">
    <input type="text" ng-model="commodityForm.commodity"/>
    <input type="text" ng-model="commodityForm.estWeight"/>
    <input type="submit" value="Add New Commodity"/>
</form>

</div>

我的AngularJS控制器：

(function() {
'use strict';
angular.module('bootstrapApp').controller('FreightSaleCtrl', FreightSaleCtrl);

    function FreightSaleCtrl($scope, $location, $http, $compile) {


        $scope.loads[0].commodities.push( $scope.commodityForm );

    }


});

点击商品表中的链接打开我的新商品表格：**

<div class="modal fade" id="commoditiesModal" tabindex="-1" role="dialog"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
    <form ng-controller="FreightSaleCtrl" id="commodity-form" role="form" novalidate>
        <div class="modal-content">
            <div class="modal-header modal-lg">
                <h5 class="modal-title" id="exampleModalLabel">
                    Add Commodity
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </h5>
            </div>

            <div class="modal-body">

                    <div class="row">   <!-- row-1 -->
                        <div class="col-sm-3"> <!-- [0, 0] -->
                            <fieldset class="form-group">
                                <label id="fieldTitle">Commodity</label>
                                <input type="text" class="form-control" placeholder="" required data-error="Commodity required">
                                <div class="help-block with-errors"></div>
                            </fieldset>
                        </div>
                        <div class="col-sm-3"> <!-- [0, 1] -->
                            <fieldset class="form-group">
                                <label id="fieldTitle">Est. Weight</label>
                                <input type="text" class="form-control" placeholder="" required data-error="Est. weight required">
                                <div class="help-block with-errors"></div>
                            </fieldset>
                        </div>
                    </div>
            </div>

            <div class="modal-footer">
                <input type="reset" class="btn btn-warning btn-sm" value="Reset" />
                <button type="button" class="btn btn-danger btn-sm" ng-click="clear()"
                    data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-default btn-sm">
                    <i class="fa fa-check-square-o"></i> Submit
                </button>
            </div>

        </div>
        </form>
    </div>
</div>

当我点击此按钮时，上面的表格打开：当表中显示的商品：

商品形式莫代尔本身

Answer 1

• 每次指定控制器时，它都会创建该控制器的新实例，因此应将其保存在一个控制器内
• qazxsw poi无法访问，因为它在外面

theLoad.commodities

解决此问题的一种方法是在表格中添加输入框 - 对于每个负载

<tr ng-repeat="cmdty in theLoad.commodities">
   <td> cmdty.commodity </td>
   <td> cmdty.estWeight </td>
</tr>