javascript 如何在 Angularjs 中创建 json 对象

How to create json object in Angularjs

提问by Emil

i want to create json object in Angularjs. when add on addBasket add new basket object to array and when click on addOrder add new order to array. in fact date field not repeat in loop. dothis way is good to create json object? or may be exist good solution to create json object.

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

Edit question:

编辑问题：

I would like to create object in the json format. I put the format below. I wrote the code that I've put it. In fact, my problem is to add an object to the orders array. how add new object to orders array?

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

  [
{
  "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>

回答by limekin

From what I have understood from your question, you want to able to add a basket to the baskets of any of the typists, and also you want to add an order to the orders of one of the baskets of one of the typists.

根据我从您的问题中了解到的情况，您希望能够在任何打字员的购物篮中添加一个购物篮，并且您还希望在其中一位打字员的购物篮中的一个购物篮的订单中添加一个订单。

For handling that I think you can pass in the right objects for addBasket and addOrder inside ng-repeat with ng-click (it works because it passes the reference). So a possible working change can be this :

对于处理，我认为您可以使用 ng-click 在 ng-repeat 中为 addBasket 和 addOrder 传递正确的对象（它起作用是因为它传递了引用）。所以一个可能的工作变化可能是这样的：

View part :

查看部分：

<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 part :

控制器部分：

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.
    });
  };
});