如何发送 Javascript 数组作为 Json 与 html 表格相结合？

Question

我正在创建一个餐厅菜单应用程序，服务员可以使用它来输入订单。

我有一个名为 itemOrderList 的 Js 数组，我在其中存储商品名称。我希望能够将该商品名称列表作为 Json 数组发送，其中包含客户名称表单输入字段和商品价格到后端以存储在我的数据库中。 我在执行此操作时遇到问题。 我应该怎么办？ 谷歌开发工具说“ReferenceError：itemOrderList 未定义”，我正在尝试对 Js 数组进行字符串化。

AngularJs代码

 .controller('orderAddCtrl', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {

            $scope.itemOrderList = [];
            $scope.totalItemPrices = 0;

            $scope.addOrderToList = function (item) {
                console.log(item.itemName);
                $scope.addPricesToTotalItemPrices(item.itemPrice);
                $scope.itemOrderList.push(item.itemName);
            };

            $scope.addPricesToTotalItemPrices = function (price) {
                console.log(price);
                $scope.totalItemPrices += price ;
            };


            $scope.removeFromOrderToList = function (index) {
                console.log(index);
                $scope.itemOrderList.splice(index, 1);
            };

            $scope.createOrder = function (order) {
                var myJson = JSON.stringify(itemOrderList);
                order.orderPrice = totalItemPrices;
                order.orderItems = myJson;
                dataService.addOrder(order).then(function () {
                    $location.path('/');
                });
            };

Html

<form class="form-horizontal" ng-init="getItems()">
    <div class="row">
        <div class="col-6">
            <div class="form-group">
                <div>
                    <input ng-click="createOrder(order)" class="btn  btn-success" value="Create" />
                    <a href="#/" class="btn  btn-success">Back</a>
                </div>
            </div>
        </div>

        <div class="col-6">
            <div class="form-group">
                <label class="control-label">Customer Name</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" ng-model="order.customerName" />
                </div>
            </div>
        </div>
    </div>

    <div>
        <h1>Total Price: ${{totalItemPrices}}</h1>
    </div>

    <div class="">
        <h2>Food Items</h2>
        <div class="row">
            <button class="btn btn-success col-3" ng-repeat="i in Items" ng-click="addOrderToList(i)">{{i.itemName}}</button>
        </div>
    </div>


    <div class="">
        <h2>Order Items</h2>
        <ul>
            <li ng-repeat="i in itemOrderList track by $index">
                <p>{{i}}/<p>
                    <button ng-click="removeFromOrderToList($index)">Remove</button>
            </li>
        </ul>
    </div>
    </div>
</form>

Answer 1

我打赌你需要指定你正在使用 $scope 中声明的变量......

$scope.createOrder = function (order) {
  var myJson = JSON.stringify($scope.itemOrderList);
  order.orderPrice = $scope.totalItemPrices;
  order.orderItems = myJson;
  dataService.addOrder(order).then(function () {
    $location.path('/');
  });
};