如何生成动态 HTML 表单（单击按钮添加新行）并在角度控制器中检索数据答案

【问题标题】：How to Generate dynamic HTML form (add a new row on-click of button) & retrieve data in angular controller如何生成动态 HTML 表单（单击按钮添加新行）并在角度控制器中检索数据
【发布时间】：2016-05-30 16:40:48
【问题描述】：

我想生成多行（在 HTML 表单内），点击 add-Row 按钮。实际上我正在发布代码的 sn-p，实际上我的 HTML 表单更复杂。一行有 2 个输入框，4 个选择选项（第 2 和第 4 个选择选项取决于第 1 和第 3 个）。 我的代码运行良好，但我如何在角度控制器中检索这些值。我想在 Angular 控制器中访问我的 html 表单数据。

<div class="addcontend">
       <div ng-repeat="item in inputs">
         <input ng-model="item.value"\>
         <select ng-model="item.parentselection"> 
            <option>opt 1</option>
            <option>opt 1</option> 
         </select>
       </div>
</div>

  $scope.inputs = [];
  $scope.addfield=function(){
    $scope.inputs.push({})
  }

如何将我的 html 表单数据映射到角度 $scope。这样我就可以拥有一个对象数组。

【问题讨论】：

你的问题不清楚
好吧，场景是这样的。我有一个页面，默认情况下会有一个 html 表单在那里（在一行中会有 2 个输入框和 4 个选择框）。有一个名为“add-new-row”的按钮。单击按钮时，它将复制 html 表单并创建另一行（2 个输入框和 4 个选择框）。我可以通过我的代码做到这一点，但问题是 - 我无法弄清楚“如何在角度控制器中访问 html 表单的值”，因为当我动态生成 html 表单时，它正在复制相同的代码，它也在复制模型名称。如何将我的 html 表单数据映射到 $scope
我明白了。这里是jsfiddle.net/rajeevs/oyb644jc/3

标签： angularjs angularjs-scope

【解决方案1】：

您可以简单地遍历范围以获取值，例如。

 angular.forEach($scope.inputs, function (value, key) {   
      // get values here
 });

要获取对象数组中的最后一个对象，以获取您推入数组中的最后一项，您可以这样做

$lastObject = $scope.inputs[$scope.inputs.length-1]

【讨论】：