使用带有嵌套javascript对象的ng submit和ng模型

我有一个表单和一组名为

Templates.row

的数据。我想使用表单将用户输入的数据推送到Templates.row，而不是一个内部对象

Templates.row.touts

因此，有两个问题： 我可以使用我的addTout（）函数将表单提交到templates.row{}：

.controller("templatesCtrl", function ($scope, Templates) {

    $scope.template = Templates;

    $scope.addTout = function() {
      $scope.template.row[$scope.ap.id] = $scope.ap;
      delete($scope.ap);
    };
});

但我希望它能在templates.row.touts内部创建：

angApp.factory("Templates", function () {
    var Templates = {};
    Templates.row = {
        touts : [
            {
                'slug' : 'slug1',
                'classes' : ['col-12', 'col-md-3', 'col-lg-3' ],
                'staticImg' : 'images/guy-1.3.jpg',
                'caption' : 'LIGHTWEIGHT STYLE',
                'subCaption' : 'Shop Nike Tech Pack'
            },
            {
                'slug' : 'slug2',
                'classes' : ['col-12', 'col-md-9n', 'col-lg-9n' ],
                'staticImg' : 'images/shoe-sing.jpeg',
                'caption' : 'THE NIKE KNOWS COLLECTION. AVAILABLE NOW.',
                'subCaption' : 'Kicks of the Week: Explore the complete Nike Knows Collection'
            }
        ]
  };
    return Templates;
});

正如你所看到的，它是在兜售者之外设置的（我不知道为什么/这意味着什么） 不幸的是，当我将addTout（）函数更改为：

    $scope.addTout = function() {
      $scope.template.row.touts[$scope.ap.id] = $scope.ap;
      delete($scope.ap);
    };

它不起作用。那么，如何将addTout（）更改为能够在touts数组中推送和创建新的数据集呢

下一个问题是：

classes

has键是一个数组。如何在表单中支持此数组，使其正确存储

<form ng-submit="addTout()" ng-model="ap" >
      <h4 >Add Tout</h4>
      <div class="form-group">
        <label>slug:</label><br>
        <input class="form-control" type="text" ng-model="ap.slug" placeholder="eg. PDX">
      </div>

       <div class="form-group ">
         <label >classes:</label><br>
        <input class="form-control" type="text" ng-model="ap.classes" placeholder="e.g. col-12">
          <input class="form-control" type="text" ng-model="ap.classes" placeholder="e.g. col-md-12">
          <input class="form-control" type="text" ng-model="ap.classes" placeholder="e.g. col-lg-12">
      </div>

      <div class="form-group">
        <label>image:</label><br>
        <input class="form-control" type="text" ng-model="ap.image" placeholder="eg. Portland Intl. Airport">
      </div>

      <div class="form-group">
        <label>caption</label><br>
        <input  class="form-control"type="text" ng-model="ap.caption" placeholder="eg. Portland">
      </div>

      <div class="form-group">
        <label>Sub Caption</label><br>
        <input  class="form-control"type="text" ng-model="ap.subcaption" placeholder="eg. Portland">
      </div>

  <input class="btn btn-primary" type="submit">
    </form>

招徕
鼻涕虫：

类别：

图像：

标题

子标题

由于touts是一个数组，您应该使用以下方法分配新条目：

$scope.template.row.touts.push($scope.ap);

这将添加它作为一个新的兜售正确。您收到未定义密钥的原因是，

$scope.ap.id

似乎没有分配到任何地方，我可以看到