如何将 ngmodel 名称动态添加到使用 ng-repeat 和按钮单击动态添加的模板？

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 这就是我想要达到的目标，所以当提交表单时，我需要在此出发目的地内循环以 post 它们到我的数据库。

我正在尝试为用户必须制作的每个 "departure" 添加一个模板。如何动态添加 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"

如何将 ngmodel 名称动态添加到使用 ng-repeat 和按钮单击动态添加的模板？

How to dynamically add ng-model name to template added dinamically with ng-repeat and button click?

html

angularjs

angular-template