如何在Angularjs中创建json对象

How to create json object in Angularjs

本文关键字：创建 json 对象 Angularjs      更新时间：2023-09-26

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

编辑问题:

我想创建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>

根据我对你的问题的理解，你希望能够将一个篮子添加到任何打字员的篮子中，并且你还希望将一个订单添加到其中一个打字员的篮子的订单中。

对于处理，我认为您可以在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>

控制器部分:

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.
    });
  };
});
相关文章：