如何通过ng-repeat和按钮单击将动态添加的ng-model名称动态添加到模板中？

Question

我有一个模板app / views / templates / destForm.tpl.html

<div class="row">
   <div class="col-sm-8">
      <div class="form-group">
         <label>Departure</label>
         <input class="form-control form-control-rounded input-lg" type="text" ng-model="???????" />
      </div>
   </div>
</div>

我将其包含在我的html页面中，如下所示：

<form action="" name="formPackages">
    <div ng-repeat="form in destForms track by $index">
        <dest-form></dest-form>
    </div>
...

在我的控制器中，我有以下代码：

$scope.destForms = [];
$scope.addForm = function(){
    var formIndex = $scope.destForms.length + 1;
    $scope.destForms.push('app/views/templates/destForm.tpl.html');
}

$scope.addForm();

编辑1：（建议使用注释）

这是我的指令。

function destForm () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
          ngModel: '<'
        },
        bindToController: true,
        controllerAs: '$quoteAskCtrl',
        templateUrl: 'app/views/templates/destForm.tpl.html',
        controller: 'quoteAskCtrl'
    };
}

编辑2 如何在模板html中将ng-model设置为在控制器的$ scope中可用？用户可以选择仅进行一次或多次出发，这就是我使用

动态添加的内容

编辑3 这就是我要达到的目标，因此，在提交表单时，我需要在此离开目的地中循环以将它们发布到我的数据库中。

我正在尝试为用户必须进行的每次“离场”添加一个模板。 如何动态添加ng-model，以便我可以在控制器中收集数据以制作$ http.post？

谢谢。

Answer 1

在您的指令中：

<input class="form-control form-control-rounded input-lg" type="text" ng-model="$quoteAskCtrl.ngModel" />

和您的html：

<form action="" name="formPackages">
   <div ng-repeat="form in destForms track by $index">
   <dest-form ng-model="form"></dest-form>
</div>

说明： 您的指令希望从父对象接收到作为“ ngModel”的信息。

因为您已设置：controllerAs: '$quoteAskCtrl', 您需要通过以下方式进行访问：ng-model="$quoteAskCtrl.ngModel"