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

Posted 2021-04-04

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

我有一个名为itemOrderList的Js数组，我正在存储项目名称。我希望能够将项目名称列表以Json数组的形式发送，并将客户名称和项目价格输入到后端，存储在我的数据库中。我在做这件事时遇到了一些问题。我应该怎么做？Google开发工具显示 "ReferenceError: itemOrderList is not defined"，而我正试图将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>

答案

我敢打赌，你需要指定你正在使用$scope中声明的vars，如...

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