时间戳

首页 > 解决方案 > 如何通过 ng-repeat 和按钮单击动态地将 ng-model 名称添加到动态添加的模板中？

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

问题描述

我有一个模板 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？

提前致谢。

标签： htmlangularjsangular-template

解决方案

在您的指令中： 

<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"

推荐阅读