如何添加到 Angular 中现有 json 对象中的数组？

Question

我的 json 对象 "flowComponents" 包含一个字符串（名称）和一个字符串数组（版本）。例如：

    {
  "_id": "553e87f3205465e83b46999b",
  "name": "FLOWCOMPONENT_CONTACTCOMBINATION_EDITION",
  "__v": 0,
  "edition": [
    "billing",
    "billingDelivery",
    "default",
    "deliveryAddressOnly",
    "deliveryBillingLicensee",
    "deliveryBillingLicenseeWithWrapper",
    "deliveryLicensee",
    "deliveryOnlyCopyToAll",
    "licenseeDelivery",
    "sassDefault",
    "sassDeliveryOnlyCopyToAll"
  ]
}

我需要 add/concat 此现有 flowComponents 对象的另一个版本。我的表单有一个包含现有 flowComponents 名称的下拉列表，以及一个将每行文本组成数组的文本区域：

<form ng-submit="addToExistingFlowComponent()">
    <div class="interact">
        <select ng-model="existingName" chosen options="flowComponents" ng-options="item as item.name for item in flowComponents" data-placeholder="Select a flow component...">
            </select>
    </div>

    <div class="interact">
        <label class="interact-label">Enter each edition on a new line.</label>
        <textarea id="text_area" placeholder="Edition" ng-model="existingEditionList" ng-list="&#10;" ng-trim="false"></textarea>
    </div>
    <button type="submit">Submit</button>
</form>

这是我控制器中的添加版本方法：

$scope.addToExistingFlowComponent = function(){
  if(!$scope.existingName || $scope.existingName === '') { return; }

  var existingFC = $scope.existingName._id;

  sendAppData.postEdition( existingFC, {
    edition: $scope.existingEditionList
  });

  $scope.existingName = '';
  $scope.existingEditionList = '';
};

这是将数据发布到服务器的方法：

this.postEdition = function(existingFC, newEdition) {
   return $http.post('/new-flow-component', newEdition).success(function(data){
        flowComponents.push(data);
    });
};

问题是，这是将数据推送到新对象，而不是添加到现有对象。我能够将现有对象的 _id 传递给 existingFC 参数，但我无法弄清楚如何在 function(data) 中获取它以便将其推送到正确的版本数组中。

Answer 1

我修改了您的代码，将文本区域中的新版本附加到您选择的版本数组中。我删除了发布到服务器的帖子，只是将它放在提交的 "new" 版本附加到版本数组的位置。这是此示例的 Plunker：http://plnkr.co/edit/U2BE9Sdlictj9dEIWkjc?p=preview

希望对您有所帮助

控制器：

app.controller('MainCtrl', function($scope) {

$scope.flowComponents = [{
  "_id": "553e87f3205465e83b46999b",
  "name": "FLOWCOMPONENT_CONTACTCOMBINATION_EDITION",
  "__v": 0,
  "edition": [
    "billing",
    "billingDelivery",
    "default",
    "deliveryAddressOnly",
    "deliveryBillingLicensee",
    "deliveryBillingLicenseeWithWrapper",
    "deliveryLicensee",
    "deliveryOnlyCopyToAll",
    "licenseeDelivery",
    "sassDefault",
    "sassDeliveryOnlyCopyToAll"
  ]
}]

$scope.addToExistingFlowComponent = function(){
  if(!$scope.existingName || $scope.existingName === '') { return; }

  var existingFC = $scope.existingName._id;
  var newEdition = {
    edition: $scope.existingEditionList
  };

  console.log($scope.existingName);
  console.log(newEdition);
  for(var i=0;i<$scope.existingEditionList.length;i++){
    $scope.existingName.edition.push($scope.existingEditionList[i]);
  }

  console.log($scope.flowComponents);

  $scope.existingName = '';
  $scope.existingEditionList = '';
}; 

});

你的HTML：

<body ng-controller="MainCtrl">

    <form ng-submit="addToExistingFlowComponent()">
    <div class="interact">
        <select ng-model="existingName" chosen options="flowComponents" ng-options="item as item.name for item in flowComponents" data-placeholder="Select a flow component...">
            </select>
    </div>

    <div class="interact">
        <label class="interact-label">Enter each edition on a new line.</label>
        <textarea id="text_area" placeholder="Edition" ng-model="existingEditionList" ng-list="&#10;" ng-trim="false"></textarea>
    </div>
    <button type="submit">Submit</button>
</form>

  </body>

如何添加到 Angular 中现有 json 对象中的数组？

How to add to an array within existing json object in Angular?

javascript

json

concat

angularjs

mean-stack