javascript - 如何在 Angularjs 中创建 json 对象

Question

我想在 Angularjs 中创建 json 对象。当添加 addBasket 时，将新的购物篮对象添加到数组中，当单击 addOrder 时，将新订单添加到数组中。事实上日期字段不会在循环中重复。这种方法可以很好地创建json对象吗？或者可能存在创建 json 对象的良好解决方案。

编辑问题:

我想以 json 格式创建对象。我把格式放在下面。我写了我放置的代码。事实上，我的问题是向订单数组添加一个对象。如何将新对象添加到订单数组？

  [
{
  "date":'2015-30-7',
 "baskets": [
   {

     "orders": [
      {
        "id": "12"
      }
     ],
     "customer": {
      "phone": "555555"
     },
     "discount": "8"
    }
  ]
 }
]

var app = angular.module('app', []);


app.controller('myController', function($scope, $http) {
  $scope.typistData = [];
    $scope.typistData.push({
      baskets: [{
        orders:[]
      }]
    });
    
  $scope.addBasket = function() {
    $scope.typistData.push({
     baskets: [{
        orders:[] 
      }]
    });
    
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>

        <input type="text" ng-model="data.name">
        <hr>
  <div ng-repeat="data in typistData" ng-if="typistData">
    <form  novalidate ng-submit="submitOffices()">

      <div>
        <ng-form  ng-repeat="basket in data.baskets">
          <div>
            <input type="text" ng-model="basket.customer.phone">
            <br>
            <input type="text" ng-model="basket.discount">
             <input type="text" ng-model="basket.orders[0].id">
                <input type="button" value="addOrder">
          </div>
          <hr>
        </ng-form>
      </div> 
    </form>
  </div> 
   <button ng-click="addBasket()">Add Basket</button>
  <div>
    <pre>{{ typistData | json }}</pre>
  </div>
 
</div>

Answer 1

根据我从您的问题中了解到的信息，您希望能够向任何打字员的篮子中添加一个篮子，并且您还希望向其中一名打字员的一个篮子的订单中添加一个订单。

为了处理这个问题，我认为你可以在 ng-repeat 和 ng-click 中传入 addBasket 和 addOrder 的正确对象(它可以工作，因为它传递了引用)。因此，可能的工作更改可能是这样的:

查看部分:

<div ng-repeat="data in typistData" ng-if="typistData">
  <form  novalidate ng-submit="submitOffices()">

    <div>
      <ng-form  ng-repeat="basket in data.baskets">
        <div>
          <input type="text" ng-model="basket.customer.phone">
          <br>
          <input type="text" ng-model="basket.discount">
          <input type="text" ng-model="basket.orders[0].id">
          <!-- Here you call the addOrder with basket. -->
          <button ng-click="addOrder(basket)">Add Order</button>
        </div>
        <hr>
      </ng-form>
      <!-- Here you call the addBasket with data. .-->
      <button ng-click="addBasket(data)">Add Basket</button>
    </div> 

  </form>
</div> 

Controller 部分:

var app = angular.module('app', []);

app.controller('myController', function($scope, $http) {
  $scope.typistData = [];
  $scope.typistData.push({
    baskets: [{
      orders:[]
    }]
  });

  /* This is wrong, because it doesn't add a basket, instead it 
     another typist's details.
  $scope.addBasket = function() {
    $scope.typistData.push({
     baskets: [{
        orders:[] 
      }]
    });
     Correct way of adding it is to use the passed in reference to the
     data of a particular typist, and add a basket to its baskets.
  */
  $scope.addBasket = function(typist) {
    // Adding a basket to the typist's baskets, and you want the 
    // basket to contain an empty orders array initially right.
    typist.baskets.push({
      orders:[] 
    });
  };

  // To add an order to one of the basket of the baskets of a 
  // particular typist.
  $scope.addOrder = function(typistBasket) {
    typistBasket.orders.push({
      // Whatever you want the order to have.
    });
  };
});